@hostlink/nuxt-light 1.52.3 → 1.53.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.52.3",
+  "version": "1.53.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/l-input-select.d.vue.ts

@@ -0,0 +1,35 @@
+import type { QSelectProps } from 'quasar';
+export interface LInputSelectProps extends QSelectProps {
+}
+type __VLS_Props = LInputSelectProps;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string | null;
+};
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
+}>, {
+    dark: boolean | null;
+    rounded: boolean;
+    square: boolean;
+    dense: boolean;
+    outlined: boolean;
+    filled: boolean;
+    stackLabel: boolean;
+    standout: string | boolean;
+    hideBottomSpace: boolean;
+    inputDebounce: string | number;
+    optionsDark: boolean | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,121 @@
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  name: { type: null, required: false },
+  virtualScrollHorizontal: { type: Boolean, required: false, skipCheck: true },
+  virtualScrollSliceSize: { type: null, required: false },
+  virtualScrollSliceRatioBefore: { type: null, required: false },
+  virtualScrollSliceRatioAfter: { type: null, required: false },
+  virtualScrollItemSize: { type: null, required: false },
+  virtualScrollStickySizeStart: { type: null, required: false },
+  virtualScrollStickySizeEnd: { type: null, required: false },
+  tableColspan: { type: null, required: false },
+  modelValue: { type: null, required: true },
+  error: { type: [Boolean, null], required: false, skipCheck: true },
+  errorMessage: { type: null, required: false },
+  noErrorIcon: { type: Boolean, required: false, skipCheck: true },
+  rules: { type: null, required: false },
+  reactiveRules: { type: Boolean, required: false, skipCheck: true },
+  lazyRules: { type: [Boolean, String], required: false, skipCheck: true },
+  label: { type: null, required: false },
+  stackLabel: { type: Boolean, required: false, skipCheck: true, default: void 0 },
+  hint: { type: null, required: false },
+  hideHint: { type: Boolean, required: false, skipCheck: true },
+  prefix: { type: null, required: false },
+  suffix: { type: null, required: false },
+  labelColor: { type: null, required: false },
+  color: { type: null, required: false },
+  bgColor: { type: null, required: false },
+  dark: { type: [Boolean, null], required: false, skipCheck: true, default: void 0 },
+  loading: { type: Boolean, required: false, skipCheck: true },
+  clearable: { type: Boolean, required: false, skipCheck: true },
+  clearIcon: { type: null, required: false },
+  filled: { type: Boolean, required: false, skipCheck: true, default: void 0 },
+  outlined: { type: Boolean, required: false, skipCheck: true, default: void 0 },
+  borderless: { type: Boolean, required: false, skipCheck: true },
+  standout: { type: [Boolean, String], required: false, skipCheck: true, default: void 0 },
+  labelSlot: { type: Boolean, required: false, skipCheck: true },
+  bottomSlots: { type: Boolean, required: false, skipCheck: true },
+  hideBottomSpace: { type: Boolean, required: false, skipCheck: true, default: true },
+  counter: { type: Boolean, required: false, skipCheck: true },
+  rounded: { type: Boolean, required: false, skipCheck: true, default: void 0 },
+  square: { type: Boolean, required: false, skipCheck: true, default: void 0 },
+  dense: { type: Boolean, required: false, skipCheck: true, default: void 0 },
+  itemAligned: { type: Boolean, required: false, skipCheck: true },
+  disable: { type: Boolean, required: false, skipCheck: true },
+  readonly: { type: Boolean, required: false, skipCheck: true },
+  autofocus: { type: Boolean, required: false, skipCheck: true },
+  for: { type: null, required: false },
+  multiple: { type: Boolean, required: false, skipCheck: true },
+  displayValue: { type: null, required: false },
+  displayValueHtml: { type: Boolean, required: false, skipCheck: true },
+  options: { type: null, required: false },
+  optionValue: { type: [Function, String], required: false, skipCheck: true },
+  optionLabel: { type: [Function, String], required: false, skipCheck: true },
+  optionDisable: { type: [Function, String], required: false, skipCheck: true },
+  hideSelected: { type: Boolean, required: false, skipCheck: true },
+  hideDropdownIcon: { type: Boolean, required: false, skipCheck: true },
+  dropdownIcon: { type: null, required: false },
+  maxValues: { type: null, required: false },
+  optionsDense: { type: Boolean, required: false, skipCheck: true },
+  optionsDark: { type: [Boolean, null], required: false, skipCheck: true, default: void 0 },
+  optionsSelectedClass: { type: null, required: false },
+  optionsHtml: { type: Boolean, required: false, skipCheck: true },
+  optionsCover: { type: Boolean, required: false, skipCheck: true },
+  menuShrink: { type: Boolean, required: false, skipCheck: true },
+  menuAnchor: { type: null, required: false },
+  menuSelf: { type: null, required: false },
+  menuOffset: { type: null, required: false },
+  popupContentClass: { type: null, required: false },
+  popupContentStyle: { type: null, required: false },
+  popupNoRouteDismiss: { type: Boolean, required: false, skipCheck: true },
+  useChips: { type: Boolean, required: false, skipCheck: true },
+  useInput: { type: Boolean, required: false, skipCheck: true },
+  maxlength: { type: null, required: false },
+  fillInput: { type: Boolean, required: false, skipCheck: true },
+  newValueMode: { type: null, required: false },
+  mapOptions: { type: Boolean, required: false, skipCheck: true },
+  disableTabSelection: { type: Boolean, required: false, skipCheck: true },
+  emitValue: { type: Boolean, required: false, skipCheck: true },
+  inputDebounce: { type: null, required: false, default: 0 },
+  inputClass: { type: null, required: false },
+  inputStyle: { type: null, required: false },
+  tabindex: { type: null, required: false },
+  autocomplete: { type: null, required: false },
+  transitionShow: { type: null, required: false },
+  transitionHide: { type: null, required: false },
+  transitionDuration: { type: null, required: false },
+  behavior: { type: null, required: false },
+  onVirtualScroll: { type: Function, required: false },
+  "onUpdate:modelValue": { type: Function, required: false },
+  onFocus: { type: Function, required: false },
+  onBlur: { type: Function, required: false },
+  onClear: { type: Function, required: false },
+  onInputValue: { type: Function, required: false },
+  onRemove: { type: Function, required: false },
+  onAdd: { type: Function, required: false },
+  onNewValue: { type: Function, required: false },
+  onFilter: { type: Function, required: false },
+  onFilterAbort: { type: Function, required: false },
+  onPopupShow: { type: Function, required: false },
+  onPopupHide: { type: Function, required: false }
+});
+const model = defineModel({ type: [String, null] });
+const setModel = (val) => {
+  model.value = val;
+};
+const localOptions = ref(props.options || []);
+const filterFn = (val, update, abort) => {
+  update(() => {
+    const needle = val.toLocaleLowerCase();
+    localOptions.value = props.options?.filter((v) => v.toLocaleLowerCase().indexOf(needle) > -1) || [];
+  });
+};
+</script>
+
+<template>
+    <q-select v-model="model" v-bind="$light.getInputProps($props)" :options="localOptions" use-input fill-input
+        hide-selected @filter="filterFn" @input-value="setModel">
+        <slot></slot>
+    </q-select>
+</template>

package/dist/runtime/components/l-input-select.vue.d.ts

@@ -0,0 +1,35 @@
+import type { QSelectProps } from 'quasar';
+export interface LInputSelectProps extends QSelectProps {
+}
+type __VLS_Props = LInputSelectProps;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string | null;
+};
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
+}>, {
+    dark: boolean | null;
+    rounded: boolean;
+    square: boolean;
+    dense: boolean;
+    outlined: boolean;
+    filled: boolean;
+    stackLabel: boolean;
+    standout: string | boolean;
+    hideBottomSpace: boolean;
+    inputDebounce: string | number;
+    optionsDark: boolean | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -399,6 +399,9 @@ const onDelete = async (id) => {
 };
 const attrs = computed(() => {
   const a = { ...light.styles.table, ...Object.fromEntries(Object.entries(props).filter(([key, value]) => value !== void 0)) };
+  if (props.name) {
+    a.visibleColumns = visibleColumns.value;
+  }
   return {
     ...a,
     loadingLabel: t(props.loadingLabel),
@@ -491,7 +494,21 @@ const showTopRight = computed(() => {
 const hidableColumns = computed(() => {
   return props.columns?.filter((c) => !c.required) || [];
 });
-const visibleColumns = props.name ? useStorage("l-table-visible-columns-" + simpleRouteName.value + "-" + props.name, hidableColumns.value.map((c) => c.name)) : ref(hidableColumns.value.map((c) => c.name));
+const visibleColumns = computed({
+  get() {
+    if (props.name) {
+      return useStorage("l-table-visible-columns-" + simpleRouteName.value + "-" + props.name, hidableColumns.value.map((c) => c.name)).value;
+    } else {
+      return null;
+    }
+  },
+  set(value) {
+    if (props.name) {
+      const storage = useStorage("l-table-visible-columns-" + simpleRouteName.value + "-" + props.name, hidableColumns.value.map((c) => c.name));
+      storage.value = value;
+    }
+  }
+});
 watch(filters, () => {
   onFilters();
 }, { deep: true });
@@ -504,13 +521,12 @@ const hasFilters = computed(() => {
 
 <template>
     <q-table v-bind="attrs" :loading="loading" :rows="rows" ref="table" @request="onLocalRequest" :columns="columns"
-        v-model:pagination="pagination" :filter="filter" v-model:selected="localSelected"
-        :visible-columns="visibleColumns">
+        v-model:pagination="pagination" :filter="filter" v-model:selected="localSelected">
         <template #header="props">
             <q-tr :props="props">
-                <q-td v-if="selection != 'none'" auto-width>
-                    <q-checkbox v-model="props.selected" />
-                </q-td>
+                <q-th v-if="selection != 'none'" auto-width>
+                    <q-checkbox v-model="props.selected" :dense="table?.dense" />
+                </q-th>
                 <q-th v-if="hasRowExpand" auto-width></q-th>
                 <q-th v-if="hasActions" auto-width></q-th>
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">{{ col.label }}</q-th>
@@ -535,7 +551,7 @@ const hasFilters = computed(() => {
         <template #body="props">
             <q-tr :props="props">
                 <q-td v-if="selection != 'none'" auto-width>
-                    <q-checkbox v-model="props.selected" />
+                    <q-checkbox v-model="props.selected" :dense="table?.dense" />
                 </q-td>
                 <q-td v-if="hasRowExpand" auto-width>
                     <q-btn flat round size="sm" :icon="props.expand ? 'sym_o_expand_more' : 'sym_o_expand_less'"

package/dist/runtime/formkit/InputSelect.d.vue.ts

@@ -0,0 +1,22 @@
+declare var __VLS_11: string | number, __VLS_12: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/formkit/InputSelect.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { computed } from "vue";
+import { getErrorMessage } from "formkit-quasar";
+import { useI18n } from "vue-i18n";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { t } = useI18n();
+const { error, errorMessage } = getErrorMessage(props.context.node);
+const value = computed({
+  get: () => props.context?.value,
+  set: (val) => props.context.node.input(val)
+});
+const onBlur = () => {
+  if (errorMessage.value) {
+    error.value = true;
+  } else {
+    error.value = false;
+  }
+};
+const label = computed(() => {
+  let l = t(props.context.label);
+  if (props.context.state.required) {
+    l = "* " + l;
+  }
+  return l;
+});
+</script>
+
+<template>
+    <l-input-select v-model="value" v-bind="context?.attrs" :label="label" :error="error" :error-message="errorMessage"
+        @blur="onBlur" :disable="context.disabled" :hint="context.help">
+
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
+        </template>
+    </l-input-select>
+</template>

package/dist/runtime/formkit/InputSelect.vue.d.ts

@@ -0,0 +1,22 @@
+declare var __VLS_11: string | number, __VLS_12: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/formkit/index.js

@@ -16,10 +16,16 @@ import EditorVue from "./Editor.vue";
 import ToggleVue from "./Toggle.vue";
 import GroupSelect from "./GroupSelect.vue";
 import TextareaVue from "./Textarea.vue";
+import InputSelect from "./InputSelect.vue";
 export const createLightPlugin = () => {
   return (node) => {
     let type = node.props.type + "";
     switch (type) {
+      case "l-input-select":
+        return node.define({
+          type: "input",
+          component: InputSelect
+        });
       case "l-editor":
         return node.define({
           type: "input",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.52.3",
+  "version": "1.53.0",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",