nuxt-hs-ui 2.11.2 → 2.11.3

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.15.0"
   },
-  "version": "2.11.2",
+  "version": "2.11.3",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -121,7 +121,7 @@ const module = defineNuxtModule({
       exposeConfig: true,
       config: twConfig
     });
-    await installModule("@pinia/nuxt", { disableVuex: true });
+    await installModule("@pinia/nuxt");
     await installModule("@vueuse/nuxt");
     addPlugin(resolve("runtime/plugin/v-select"));
   }

package/dist/runtime/components/form/radio.vue

@@ -15,6 +15,7 @@ import { type ClassType, ClassTypeToString } from "../../utils/class-style";
 import type { SelectItem } from "../../utils/select-item";
 import { useDisplayList, type DisplaySelectItem } from "../../utils/select";
 import type { MultiLang } from "../../utils/multi-lang";
+import { ObjectCopy } from "../../utils/object";
 
 // [ composables ]
 import { useHsFocus } from "../../composables/use-hs-focus";
@@ -28,6 +29,7 @@ import Btn from "../form/btn.vue";
 const hsFocus = useHsFocus();
 const multiLang = useHsMultiLang();
 const tx = multiLang.tx;
+const gt = multiLang.gt;
 // ----------------------------------------------------------------------------
 // [ Props ]
 type Props = {
@@ -208,26 +210,61 @@ interface SelectItemShow extends DisplaySelectItem<IdType> {
   activate: boolean;
   i: number;
 }
+const displayList = ref<SelectItemShow[]>([]);
 
-const displayList = computed<SelectItemShow[]>(() => {
-  return useDisplayList<IdType>({
-    list: props.list,
-    id: props.data,
-    order: props.order,
-    unKnownData: unKnownData.value,
-    unKnownSelected: unKnownSelected.value,
-    isShowHidden: isShowHidden.value,
-    require: props.require || !props.nullable,
-    nullText: tx(props.nullText).value,
-  }).map((row, index) => {
-    return {
-      ...row,
-      elm: null,
-      activate: false,
-      i: index,
-    };
-  });
-});
+watch(
+  () => [
+    props.list,
+    props.list.length,
+    props.data,
+    isShowHidden.value,
+    props.require,
+    props.nullable,
+    props.nullText,
+  ],
+  () => {
+    displayList.value = useDisplayList<IdType>({
+      list: ObjectCopy(props.list).map((row) => {
+        return { ...row, text: gt(row.text) };
+      }),
+      id: props.data,
+      order: props.order,
+      unKnownData: unKnownData.value,
+      unKnownSelected: unKnownSelected.value,
+      isShowHidden: isShowHidden.value,
+      require: props.require || !props.nullable,
+      nullText: tx(props.nullText).value,
+    }).map((row, index) => {
+      return {
+        ...row,
+        elm: null,
+        activate: false,
+        i: index,
+      };
+    }) as SelectItemShow[];
+  },
+  { immediate: true }
+);
+
+// const displayList = computed<SelectItemShow[]>(() => {
+//   return useDisplayList<IdType>({
+//     list: props.list,
+//     id: props.data,
+//     order: props.order,
+//     unKnownData: unKnownData.value,
+//     unKnownSelected: unKnownSelected.value,
+//     isShowHidden: isShowHidden.value,
+//     require: props.require || !props.nullable,
+//     nullText: tx(props.nullText).value,
+//   }).map((row, index) => {
+//     return {
+//       ...row,
+//       elm: null,
+//       activate: false,
+//       i: index,
+//     };
+//   });
+// });
 // ----------------------------------------------------------------------------
 
 const checkData = (id: IdType | null) => {
@@ -306,7 +343,7 @@ const onBlur = (index: null | number) => {
   if (props.readonly) return;
   if (index === null) {
     focusState.isNullActivate = false;
-  } else {
+  } else if (index in displayList.value) {
     displayList.value[index].activate = false;
   }
   setTimeout(() => {
@@ -481,7 +518,7 @@ const inputClass = computed(() => {
             :class="colClass"
             @mousedown="onMousedownItem"
             @mouseup="onMouseupItem(row.elm)"
-            @click="setValue(row)"
+            @click="setValue(row as SelectItemShow)"
           >
             <div
               class="nac-radio"

package/dist/runtime/components/form/select.vue

@@ -9,10 +9,15 @@
 // [ tailwind ]
 // [ NUXT ]
 import { reactive, ref, watch, computed, useId, nextTick } from "#imports";
+
+// import { createPopper } from "@popperjs/core";
+
 // [ utils ]
 import type { ClassType } from "../../utils/class-style";
 import type { SelectItem } from "../../utils/select-item";
 import { useDisplayList, type DisplaySelectItem } from "../../utils/select";
+import { ObjectCopy } from "../../utils/object";
+
 import type { MultiLang } from "../../utils/multi-lang";
 // [ composables ]
 import { useHsFocus } from "../../composables/use-hs-focus";
@@ -193,25 +198,58 @@ const unKnownData = computed(() => {
 // ----------------------------------------------------------------------------
 const isShowHidden = ref(false);
 /** 選択肢に非表示アイテムが含まれているかどうか */
+
+const pList = computed(() => {
+  return ObjectCopy(props.list);
+});
 const includeHidden = computed(() => {
-  return props.list.filter((row) => row.hidden).length > 0;
+  return pList.value.filter((row) => row.hidden).length > 0;
 });
 // ----------------------------------------------------------------------------
 /** 選択肢 */
-const displayList = computed(() => {
-  return useDisplayList<IdType>({
-    list: props.list.map((row) => {
-      return { ...row, text: gt(row.text) };
-    }),
-    id: props.data,
-    order: props.order,
-    unKnownData: unKnownData.value,
-    unKnownSelected: unKnownSelected.value,
-    isShowHidden: isShowHidden.value,
-    require: props.require || !props.nullable,
-    nullText: tx(props.nullText).value,
-  });
-});
+const displayList = ref<DisplaySelectItem<IdType>[]>([]);
+
+watch(
+  () => [
+    props.list,
+    props.list.length,
+    props.data,
+    isShowHidden.value,
+    props.require,
+    props.nullable,
+    props.nullText,
+  ],
+  () => {
+    displayList.value = useDisplayList<IdType>({
+      list: ObjectCopy(props.list).map((row) => {
+        return { ...row, text: gt(row.text) };
+      }),
+      id: props.data,
+      order: props.order,
+      unKnownData: unKnownData.value,
+      unKnownSelected: unKnownSelected.value,
+      isShowHidden: isShowHidden.value,
+      require: props.require || !props.nullable,
+      nullText: tx(props.nullText).value,
+    });
+  },
+  { immediate: true }
+);
+// const displayList = computed(() => {
+//   console.log("displayList");
+//   return useDisplayList<IdType>({
+//     list: ObjectCopy(props.list).map((row) => {
+//       return { ...row, text: gt(row.text) };
+//     }),
+//     id: props.data,
+//     order: props.order,
+//     unKnownData: unKnownData.value,
+//     unKnownSelected: unKnownSelected.value,
+//     isShowHidden: isShowHidden.value,
+//     require: props.require || !props.nullable,
+//     nullText: tx(props.nullText).value,
+//   });
+// });
 // ----------------------------------------------------------------------------
 
 const checkData = (id: IdType | null) => {
@@ -286,6 +324,33 @@ const selectClose = () => {
   focusState.isOpen = false;
   emit("selectClose", uid);
 };
+// const placement = ref("top");
+const inputElement = ref<HTMLElement | null>(null);
+// const withPopper = (dropdownList: any, component: any, { width }: any) => {
+//   dropdownList.style.width = width;
+//   const popper = createPopper(component.$refs.toggle, dropdownList, {
+//     placement: placement.value as any,
+//     modifiers: [
+//       {
+//         name: "offset",
+//         options: {
+//           offset: [0, -1],
+//         },
+//       },
+//       {
+//         name: "toggleClass",
+//         enabled: true,
+//         phase: "write",
+//         fn({ state }) {
+//           component.$el.classList.toggle("drop-up", state.placement === "top");
+//         },
+//       },
+//     ],
+//   });
+//   return () => popper.destroy();
+// };
+//       :calculate-position="withPopper"
+
 // ----------------------------------------------------------------------------
 // ----------------------------------------------------------------------------
 </script>
@@ -500,6 +565,10 @@ const selectClose = () => {
   display: none;
 }
 
+.vs__dropdown-menu {
+  max-height: 250px;
+}
+
 .v-select-hidden-toggle-switch {
   pointer-events: all !important;
 }

package/dist/runtime/components/interactive/modal.vue

@@ -9,7 +9,7 @@
 // [ tailwind ]
 import { twMerge } from "tailwind-merge";
 // [ NUXT ]
-import { useId, computed, watch, onUnmounted, ref } from "#imports";
+import { useId, computed, watch, onUnmounted, ref, useHead } from "#imports";
 // [ utils ]
 import { type ClassType, ClassTypeToString } from "../../utils/class-style";
 // [ composables ]
@@ -59,6 +59,14 @@ if (props.show) {
     hsModal.add(id, props.closeable);
   }
 }
+useHead({
+  style: [
+    {
+      // flatpickr が毎回勝てるよう、都度上書き
+      children: `.flatpickr-calendar{z-index:${zOrder.value + 1} !important;}`,
+    },
+  ],
+});
 watch(
   () => props.show,
   (show) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-hs-ui",
-  "version": "2.11.2",
+  "version": "2.11.3",
   "description": "My new Nuxt module",
   "repository": "https://github.com/hare-systems-ryo/nuxt-hs-ui",
   "license": "MIT",
@@ -117,6 +117,7 @@
     "@nuxt/ui": "^2.21.0",
     "@nuxtjs/tailwindcss": "^6.13.1",
     "@pinia/nuxt": "0.11.0",
+    "@popperjs/core": "^2.11.8",
     "@vueuse/core": "^12.3.0",
     "@vueuse/integrations": "^12.3.0",
     "@vueuse/nuxt": "^12.3.0",
@@ -146,8 +147,8 @@
     "eslint": "^9.18.0",
     "nuxt": "^3.15.1",
     "sass": "^1.83.4",
-    "tailwindcss": "^3.4.17",
     "sass-embedded": "^1.83.4",
+    "tailwindcss": "^3.4.17",
     "typescript": "~5.7.3",
     "vitest": "^2.1.8",
     "vue-tsc": "^2.2.0"