nuxt-hs-ui 2.1.20 → 2.3.0

package/dist/module.json

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

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

@@ -333,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"
@@ -350,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"
@@ -368,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>
@@ -408,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/components/interactive/dialog.vue

@@ -260,11 +260,16 @@ const baseCardHeader = [
             {{ tx(activeItem.data.message) }}
           </div>
           <div :class="btnBaseStyle">
-            <div>
+            <div class="flex-cc">
               <Btn
                 v-if="activeItem.data.option.btnLeft.isShow"
-                :class="btnStyle"
-                variant="flat"
+                :class="[
+                  btnStyle,
+                  activeItem.data.option.btnLeft.variant === 'outlined'
+                    ? 'bg-white'
+                    : '',
+                ]"
+                :variant="activeItem.data.option.btnLeft.variant"
                 :theme="activeItem.data.option.btnLeft.theme"
                 @click="clickLeft()"
                 @ref="(e:any) => (leftBtnElm = e)"
@@ -273,11 +278,16 @@ const baseCardHeader = [
                 {{ tx(activeItem.data.option.btnLeft.title) }}
               </Btn>
             </div>
-            <div>
+            <div class="flex-cc">
               <Btn
                 v-if="activeItem.data.option.btnRight.isShow"
-                :class="btnStyle"
-                variant="flat"
+                :class="[
+                  btnStyle,
+                  activeItem.data.option.btnRight.variant === 'outlined'
+                    ? 'bg-white'
+                    : '',
+                ]"
+                :variant="activeItem.data.option.btnRight.variant"
                 :theme="activeItem.data.option.btnRight.theme"
                 @click="clickRight()"
                 @ref="(e:any) => (rightBtnElm = e)"

package/dist/runtime/types/dialog.d.ts

@@ -18,11 +18,13 @@ export interface DialogOption {
         isShow: boolean;
         title: MultiLang;
         theme: Theme;
+        variant: "flat" | "text" | "outlined";
     };
     btnRight: {
         isShow: boolean;
         title: MultiLang;
         theme: Theme;
+        variant: "flat" | "text" | "outlined";
     };
     btnCancel: {
         isShow: boolean;

package/dist/runtime/types/dialog.js

@@ -12,12 +12,14 @@ export const InitDialogOption = () => {
     btnLeft: {
       isShow: true,
       title: "no",
-      theme: "dark"
+      theme: "dark",
+      variant: "flat"
     },
     btnRight: {
       isShow: true,
       title: "Yes",
-      theme: "accent1"
+      theme: "accent1",
+      variant: "flat"
     },
     btnCancel: {
       isShow: true,

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

@@ -25,4 +25,6 @@ export interface SelectItem<IdType extends number | string = number> {
      * ただし選択要素は表示する
      */
     deleted?: boolean;
+    /** iタグのアイコンを追加出来る Class */
+    appendIcon?: string | string[];
 }

package/package.json

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