nuxt-hs-ui 2.11.2 → 2.11.4

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.15.0"
   },
-  "version": "2.11.2",
+  "version": "2.11.4",
   "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

@@ -9,12 +9,21 @@
 // [ tailwind ]
 import { twMerge } from "tailwind-merge";
 // [ NUXT ]
-import { reactive, ref, watch, computed, useId, nextTick } from "#imports";
+import {
+  reactive,
+  ref,
+  watch,
+  computed,
+  useId,
+  nextTick,
+  type Ref,
+} from "#imports";
 // [ utils ]
 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 +37,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,10 +218,14 @@ interface SelectItemShow extends DisplaySelectItem<IdType> {
   activate: boolean;
   i: number;
 }
+const displayList: Ref<SelectItemShow[]> = ref([]);
 
-const displayList = computed<SelectItemShow[]>(() => {
-  return useDisplayList<IdType>({
-    list: props.list,
+const setDisplayList = () => {
+  console.log("setDisplayList");
+  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,
@@ -226,8 +240,26 @@ const displayList = computed<SelectItemShow[]>(() => {
       activate: false,
       i: index,
     };
-  });
-});
+  }) as SelectItemShow[];
+};
+
+watch(
+  () => [
+    props.list,
+    props.list.length,
+    props.data,
+    isShowHidden.value,
+    props.require,
+    props.nullable,
+    props.nullText,
+  ],
+  () => {
+    nextTick(() => {
+      setDisplayList();
+    });
+  },
+  { immediate: true }
+);
 // ----------------------------------------------------------------------------
 
 const checkData = (id: IdType | null) => {
@@ -306,7 +338,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(() => {
@@ -358,6 +390,7 @@ const onKeyup = (event: KeyboardEvent) => {
 const setValue = async (row: SelectItemShow | null) => {
   if (props.disabled) return;
   if (props.readonly) return;
+  console.log(row);
   displayData.value = row;
 };
 

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>
@@ -351,7 +416,10 @@ const selectClose = () => {
       <!--  -->
       <!--  -->
       <template #selected-option="{ text, imgUrl, deleted, appendIcon }">
-        <div class="flex items-baseline w-full max-w-full min-w-0">
+        <div
+          class="flex items-baseline w-full max-w-full min-w-0"
+          :class="loading ? 'opacity-0' : ''"
+        >
           <SelectImgIcon
             v-if="imgUrl && props.image"
             class="flex-none"
@@ -500,6 +568,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.4",
   "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"