@funcho/ui 1.1.23 → 1.1.25

package/dist/cjs/business/QueryForm/QueryForm.vue.js

@@ -111,8 +111,20 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const formRef = vue.ref();
     const { height: formHeight } = core.useElementSize(formRef);
     const hasMoreContent = vue.computed(() => {
-      return formHeight.value > 28;
+      return formRows.value > 1;
     });
+    const getGridRowCount = (container) => {
+      if (!container) return { count: 0, height: 0 };
+      const style = window.getComputedStyle(container);
+      const rows = style.getPropertyValue("grid-template-rows");
+      if (!rows || rows === "none") return { count: 0, height: 0 };
+      const rowHeights = rows.split(/\s+/).filter(Boolean);
+      const rowCount = rowHeights.length;
+      return {
+        count: rowCount,
+        height: rowCount > 0 ? parseFloat(rowHeights[0] || "0") : 0
+      };
+    };
     const isExpanded = vue.ref(false);
     const props = __props;
     const renderTools = (tools) => {
@@ -167,6 +179,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const handleSearchClick = () => {
       emits("search", formRef.value?.model || {});
     };
+    const formRows = vue.ref(0);
+    const formFirstRowHeight = vue.ref(0);
+    core.useResizeObserver(formRef, () => {
+      if (formRef.value) {
+        const { count, height } = getGridRowCount(formRef.value.$el);
+        formRows.value = count;
+        formFirstRowHeight.value = height;
+      }
+    });
     __expose(
       new Proxy(
         {},
@@ -186,14 +207,17 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         ref_key: "queryBoxRef",
         ref: queryBoxRef,
         class: vue.normalizeClass({ [vue.unref(ns).e("query-box")]: true, [vue.unref(ns).is("expanded")]: isExpanded.value }),
-        style: vue.normalizeStyle({ "--query-box-max-height": vue.unref(formHeight) + 16 + "px" })
+        style: vue.normalizeStyle({
+          "--query-box-max-height": vue.unref(formHeight) + 16 + "px",
+          "--query-box-first-row-height": formFirstRowHeight.value + 16 + "px"
+        })
       }, [
         vue.createVNode(ProForm_vue_vue_type_script_setup_true_lang.default, {
           ref_key: "formRef",
           ref: formRef,
           inline: "",
           fields: searchFormFields.value,
-          class: vue.normalizeClass(vue.unref(ns).e("query-form")),
+          class: vue.normalizeClass({ [vue.unref(ns).e("query-form")]: true, [vue.unref(ns).is("query")]: true }),
           "label-position": "right",
           "label-width": hasMoreContent.value && isExpanded.value ? "auto" : "fit-content"
         }, null, 8, ["fields", "class", "label-width"]),

package/dist/cjs/packages/ui/package.json.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const version = "1.1.23";
+const version = "1.1.25";
 
 exports.version = version;

package/dist/esm/business/QueryForm/QueryForm.vue.mjs

@@ -79,7 +79,7 @@ import '../../components/LovText/index.mjs';
 import '../../components/DotStatus/index.mjs';
 import _sfc_main$1 from '../ProForm/ProForm.vue.mjs';
 /* empty css                       */
-import { useElementSize } from '@vueuse/core';
+import { useElementSize, useResizeObserver } from '@vueuse/core';
 import _sfc_main$2 from '../../components/VNodeRenderer/index.vue.mjs';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -107,8 +107,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const formRef = ref();
     const { height: formHeight } = useElementSize(formRef);
     const hasMoreContent = computed(() => {
-      return formHeight.value > 28;
+      return formRows.value > 1;
     });
+    const getGridRowCount = (container) => {
+      if (!container) return { count: 0, height: 0 };
+      const style = window.getComputedStyle(container);
+      const rows = style.getPropertyValue("grid-template-rows");
+      if (!rows || rows === "none") return { count: 0, height: 0 };
+      const rowHeights = rows.split(/\s+/).filter(Boolean);
+      const rowCount = rowHeights.length;
+      return {
+        count: rowCount,
+        height: rowCount > 0 ? parseFloat(rowHeights[0] || "0") : 0
+      };
+    };
     const isExpanded = ref(false);
     const props = __props;
     const renderTools = (tools) => {
@@ -163,6 +175,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const handleSearchClick = () => {
       emits("search", formRef.value?.model || {});
     };
+    const formRows = ref(0);
+    const formFirstRowHeight = ref(0);
+    useResizeObserver(formRef, () => {
+      if (formRef.value) {
+        const { count, height } = getGridRowCount(formRef.value.$el);
+        formRows.value = count;
+        formFirstRowHeight.value = height;
+      }
+    });
     __expose(
       new Proxy(
         {},
@@ -182,14 +203,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref_key: "queryBoxRef",
         ref: queryBoxRef,
         class: normalizeClass({ [unref(ns).e("query-box")]: true, [unref(ns).is("expanded")]: isExpanded.value }),
-        style: normalizeStyle({ "--query-box-max-height": unref(formHeight) + 16 + "px" })
+        style: normalizeStyle({
+          "--query-box-max-height": unref(formHeight) + 16 + "px",
+          "--query-box-first-row-height": formFirstRowHeight.value + 16 + "px"
+        })
       }, [
         createVNode(_sfc_main$1, {
           ref_key: "formRef",
           ref: formRef,
           inline: "",
           fields: searchFormFields.value,
-          class: normalizeClass(unref(ns).e("query-form")),
+          class: normalizeClass({ [unref(ns).e("query-form")]: true, [unref(ns).is("query")]: true }),
           "label-position": "right",
           "label-width": hasMoreContent.value && isExpanded.value ? "auto" : "fit-content"
         }, null, 8, ["fields", "class", "label-width"]),

package/dist/esm/packages/ui/package.json.mjs

@@ -1,3 +1,3 @@
-const version = "1.1.23";
+const version = "1.1.25";
 
 export { version };

package/dist/style.css

@@ -17078,6 +17078,7 @@ to {
   display: grid;
   grid-template-columns: repeat(var(--grid-columns, auto-fill), minmax(220px, 1fr));
   column-gap: 24px;
+  align-items: start;
 }
 .fc-mkui-pro-form__container.is-inline .fc-ui-form-item {
   margin-right: 0;
@@ -17098,29 +17099,23 @@ to {
   border-radius: 2px;
   margin-bottom: 8px;
   padding: 8px;
-  max-height: 44px;
+  max-height: var(--query-box-first-row-height);
   overflow: hidden;
   transition: max-height 0.4s cubic-bezier(0.23, 1, 0.32, 1);
 }
 .fc-mkui-query-form__query-box.is-expanded {
   max-height: var(--query-box-max-height);
 }
-.fc-mkui-query-form__query-form {
+.fc-mkui-query-form__query-form.is-query {
   flex: 1;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 8px 24px;
+  align-items: start;
 }
-.fc-mkui-query-form__query-form .fc-ui-form-item {
+.fc-mkui-query-form__query-form.is-query .fc-ui-form-item {
   margin: 0;
 }
-.fc-mkui-query-form__query-form .fc-ui-form-item .fc-ui-cascader .fc-ui-cascader__tags {
-  display: inline-flex;
-  flex-wrap: nowrap;
-}
-.fc-mkui-query-form__query-form .fc-ui-form-item .fc-ui-cascader .fc-ui-cascader__tags .fc-ui-tag {
-  max-width: calc(100% - 109px);
-}
 .fc-mkui-query-form__tools {
   margin-top: auto;
   flex-shrink: 0;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@funcho/ui",
   "description": "@funcho ui library",
-  "version": "1.1.23",
+  "version": "1.1.25",
   "type": "module",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.mjs",