nuxt-hs-ui 2.1.19 → 2.2.0

package/dist/module.json

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

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="IdType extends string|number">
 /* ----------------------------------------------------------------------------
 // src\runtime\components\form\radio.vue
 // ----------------------------------------------------------------------------
@@ -31,7 +31,7 @@ const tx = multiLang.tx;
 type Props = {
   // ----------------------------------------------------------------------------
   // Input 種類別
-  list: SelectItem[];
+  list: SelectItem<IdType>[];
   order?: boolean;
   image?: boolean;
   loading?: boolean;
@@ -42,8 +42,8 @@ type Props = {
   classImgTag?: ClassType;
   nullable?: boolean;
   // ----------------------------------------------------------------------------
-  data: number | null;
-  diff?: number | null | undefined;
+  data: IdType | null;
+  diff?: IdType | null | undefined;
   tabindex?: string | undefined;
   // ----------------------------------------------------------------------------
   class?: ClassType;
@@ -115,6 +115,7 @@ const props = withDefaults(defineProps<Props>(), {
   // 設定
   size: "m",
 });
+type EmitIdType = IdType extends string ? string : number;
 // ----------------------------------------------------------------------------
 // [ emit ]
 type Emits = {
@@ -122,8 +123,8 @@ type Emits = {
   focus: [elm: HTMLElement];
   blur: [elm: HTMLElement];
   // ----------------------------
-  "update:data": [value: number | null];
-  "value-change": [after: number | null, before: number | null];
+  "update:data": [value: EmitIdType | null];
+  "value-change": [after: EmitIdType | null, before: EmitIdType | null];
   // ----------------------------
   keydown: [event: KeyboardEvent];
   keyup: [event: KeyboardEvent];
@@ -150,22 +151,27 @@ const isChangeData = computed(() => {
 // [ ref ]
 
 // ----------------------------------------------------------------------------
-const displayData = ref<DisplaySelectItem | null>(null);
+const displayData = ref<DisplaySelectItem<IdType> | null>(null);
 watch(displayData, (v) => {
   const before = props.data;
   if (v === null) {
     emit("update:data", null);
-    emit("value-change", null, before);
+    emit("value-change", null, before as any as EmitIdType | null);
     return;
   }
   if (v.id === null) {
     displayData.value = null;
     return;
   }
-  emit("update:data", v.id);
-  emit("value-change", v.id, before);
+  emit("update:data", v.id as any as EmitIdType | null);
+  emit(
+    "value-change",
+    v.id as any as EmitIdType | null,
+    before as any as EmitIdType | null
+  );
 });
 const selectedId = computed(() => {
+  console.log("selectedId", displayData.value);
   if (displayData.value === null) {
     return null;
   }
@@ -190,13 +196,14 @@ const includeHidden = computed(() => {
 });
 // ----------------------------------------------------------------------------
 /** 選択肢 */
-interface SelectItemShow extends DisplaySelectItem {
+interface SelectItemShow extends DisplaySelectItem<IdType> {
   elm: HTMLElement | null;
   activate: boolean;
+  i: number;
 }
 
 const displayList = computed<SelectItemShow[]>(() => {
-  return useDisplayList({
+  return useDisplayList<IdType>({
     list: props.list,
     id: props.data,
     order: props.order,
@@ -205,17 +212,18 @@ const displayList = computed<SelectItemShow[]>(() => {
     isShowHidden: isShowHidden.value,
     require: props.require || !props.nullable,
     nullText: props.nullText,
-  }).map((row) => {
+  }).map((row, index) => {
     return {
       ...row,
       elm: null,
       activate: false,
+      i: index,
     };
   });
 });
 // ----------------------------------------------------------------------------
 
-const checkData = (id: number | null) => {
+const checkData = (id: IdType | null) => {
   const ret = displayList.value.find((row) => row.id === id);
   if (ret === undefined) {
     // 選択肢に存在しないコード引当
@@ -426,7 +434,6 @@ const inputClass = computed(() => {
             <input
               :id="`radio${uid}-null`"
               :ref="(e:any) => (inputElementNull = e)"
-              v-bind="(selectedId as any)"
               type="radio"
               :name="`radio${uid}`"
               :tabindex="props.tabindex"
@@ -469,7 +476,6 @@ const inputClass = computed(() => {
               <input
                 :id="`radio${uid}-${row.id}`"
                 :ref="(e:any) => (row.elm = e)"
-                v-bind="(selectedId as any)"
                 type="radio"
                 class=""
                 :name="`radio${uid}`"

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="IdType extends string|number">
 /* ----------------------------------------------------------------------------
 // src\runtime\components\form\select.vue
 // ----------------------------------------------------------------------------
@@ -31,7 +31,7 @@ const tx = multiLang.tx;
 type Props = {
   // ----------------------------------------------------------------------------
   // Input 種類別
-  list: SelectItem[];
+  list: SelectItem<IdType>[];
   order?: boolean;
   loading?: boolean;
   nullText?: string;
@@ -40,8 +40,8 @@ type Props = {
   classImgTag?: ClassType;
   nullable?: boolean;
   // ----------------------------------------------------------------------------
-  data: number | null;
-  diff?: number | null | undefined;
+  data: IdType | null;
+  diff?: IdType | null | undefined;
   tabindex?: string | undefined;
   // ----------------------------------------------------------------------------
   class?: ClassType;
@@ -112,14 +112,16 @@ const props = withDefaults(defineProps<Props>(), {
   size: "m",
 });
 // ----------------------------------------------------------------------------
+type EmitIdType = IdType extends string ? string : number;
+
 // [ emit ]
 type Emits = {
   ref: [element: HTMLElement];
   focus: [elm: HTMLElement];
   blur: [elm: HTMLElement];
   // ----------------------------
-  "update:data": [value: number | null];
-  "value-change": [after: number | null, before: number | null];
+  "update:data": [value: EmitIdType | null];
+  "value-change": [after: EmitIdType | null, before: EmitIdType | null];
   // ----------------------------
   keydown: [event: KeyboardEvent];
   keyup: [event: KeyboardEvent];
@@ -148,13 +150,13 @@ const isChangeData = computed(() => {
 // [ ref ]
 
 // ----------------------------------------------------------------------------
-const displayData = ref<DisplaySelectItem | null>(null);
+const displayData = ref<DisplaySelectItem<IdType> | null>(null);
 watch(displayData, (v) => {
   const before = props.data;
   if (v === null) {
     if (before === null) return;
     emit("update:data", null);
-    emit("value-change", null, before);
+    emit("value-change", null, before as any as EmitIdType | null);
     return;
   }
   if (v.id === null) {
@@ -162,8 +164,12 @@ watch(displayData, (v) => {
     return;
   }
   if (v.id === before) return;
-  emit("update:data", v.id);
-  emit("value-change", v.id, before);
+  emit("update:data", v.id as any as EmitIdType | null);
+  emit(
+    "value-change",
+    v.id as any as EmitIdType | null,
+    before as any as EmitIdType | null
+  );
 });
 
 // ----------------------------------------------------------------------------
@@ -186,7 +192,7 @@ const includeHidden = computed(() => {
 // ----------------------------------------------------------------------------
 /** 選択肢 */
 const displayList = computed(() => {
-  return useDisplayList({
+  return useDisplayList<IdType>({
     list: props.list,
     id: props.data,
     order: props.order,
@@ -199,7 +205,7 @@ const displayList = computed(() => {
 });
 // ----------------------------------------------------------------------------
 
-const checkData = (id: number | null) => {
+const checkData = (id: IdType | null) => {
   const ret = displayList.value.find((row) => row.id === id);
   if (ret === undefined) {
     // 選択肢に存在しないコード引当
@@ -327,7 +333,9 @@ const selectClose = () => {
     >
       <!--  -->
       <!--  -->
-      <template #selected-option="{ text, imgUrl, deleted, hidden }">
+      <template
+        #selected-option="{ text, imgUrl, deleted, hidden, appendIcon }"
+      >
         <div class="flex items-baseline w-full">
           <SelectImgIcon
             v-if="imgUrl && props.image"
@@ -344,9 +352,15 @@ const selectClose = () => {
           <div v-if="hidden" class="text-error text-[0.7em] leading-[1em]">
             ※非表示
           </div>
+          <span v-if="appendIcon && typeof appendIcon === 'string'">
+            <i :class="appendIcon"></i>
+          </span>
+          <span v-else-if="appendIcon && Array.isArray(appendIcon)">
+            <i v-for="(c, i) in appendIcon" :key="i" :class="c"></i>
+          </span>
         </div>
       </template>
-      <template #option="{ text, imgUrl, deleted, hidden }">
+      <template #option="{ text, imgUrl, deleted, hidden, appendIcon }">
         <div class="flex items-center">
           <SelectImgIcon
             v-if="props.image"
@@ -362,6 +376,12 @@ const selectClose = () => {
           <div v-if="hidden" class="text-error text-[0.7em] leading-[1em]">
             ※非表示
           </div>
+          <span v-if="appendIcon && typeof appendIcon === 'string'">
+            <i :class="appendIcon"></i>
+          </span>
+          <span v-else-if="appendIcon && Array.isArray(appendIcon)">
+            <i v-for="(c, i) in appendIcon" :key="i" :class="c"></i>
+          </span>
         </div>
       </template>
       <template v-if="includeHidden" #list-footer>
@@ -402,9 +422,16 @@ const selectClose = () => {
 .v-select > div {
   border-width: 0 !important;
 }
+.v-select:not(.vs--open).vs--single.vs--searchable .vs__selected {
+  width: 100%;
+}
+.v-select.vs--open.vs--single.vs--searchable .vs__selected {
+  width: calc(100% - 0.5em);
+}
 .v-select .vs__selected {
   margin-top: 0 !important;
   margin-bottom: 0 !important;
+  flex: 1 1 auto;
 }
 .v-select .vs__selected,
 .v-select .vs__selected-options {

package/dist/runtime/utils/select-item.d.ts

@@ -1,6 +1,6 @@
 import type { MultiLang } from "./multi-lang.js";
-export interface SelectItem {
-    readonly id: number;
+export interface SelectItem<IdType extends number | string = number> {
+    readonly id: IdType;
     /**
      * 多言語の場合は多言語のオブジェクトをセットする
      */
@@ -25,7 +25,6 @@ export interface SelectItem {
      * ただし選択要素は表示する
      */
     deleted?: boolean;
+    /** iタグのアイコンを追加出来る Class */
+    appendIcon?: string | string[];
 }
-type WithoutRequier = Partial<Omit<SelectItem, "id" | "text">>;
-export type SelectItemOrigin = Omit<SelectItem, keyof WithoutRequier> & WithoutRequier;
-export {};

package/dist/runtime/utils/select.d.ts

@@ -1,14 +1,14 @@
 import type { SelectItem } from "./select-item.js";
-export type DisplaySelectItem = {
-    id: number | null;
-} & Omit<SelectItem, "id">;
-export declare const useDisplayList: (arg: {
-    list: SelectItem[];
-    id: number | null;
+export type DisplaySelectItem<IdType extends string | number> = {
+    id: IdType | null;
+} & Omit<SelectItem<IdType>, "id">;
+export declare const useDisplayList: <IdType extends string | number>(arg: {
+    list: SelectItem<IdType>[];
+    id: IdType | null;
     order: boolean;
-    unKnownData: SelectItem | null;
+    unKnownData: SelectItem<IdType> | null;
     unKnownSelected: boolean;
     isShowHidden: boolean;
     require: boolean;
     nullText: string;
-}) => DisplaySelectItem[];
+}) => DisplaySelectItem<IdType>[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-hs-ui",
-  "version": "2.1.19",
+  "version": "2.2.0",
   "description": "My new Nuxt module",
   "repository": "https://github.com/hare-systems-ryo/nuxt-hs-ui",
   "license": "MIT",