nuxt-hs-ui 2.0.19 → 2.0.21

package/dist/module.json

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

package/dist/runtime/components/form/check-list.vue

@@ -123,7 +123,13 @@ type Emits = {
   "value-change": [after: number[], before: number[], id: number];
 };
 const emit = defineEmits<Emits>();
-
+// ----------------------------------------------------------------------------
+const slots = defineSlots<{
+  default(props: { msg: string }): any;
+  overlay?(): any;
+  "right-icons"?(): any;
+  "left-icons"?(): any;
+}>();
 // ----------------------------------------------------------------------------
 
 // [ 選択肢配列 ]
@@ -313,7 +319,13 @@ const itemClass = computed(() => {
     :warn-time-out="props.warnTimeOut"
     :size="props.size"
   >
-    <template v-if="$slots.overlay" #overlay>
+    <template v-if="slots['left-icons']" #left-icons>
+      <slot name="left-icons" :disabled="disabled" />
+    </template>
+    <template v-if="slots['right-icons']" #right-icons>
+      <slot name="right-icons" :disabled="disabled" />
+    </template>
+    <template v-if="slots.overlay" #overlay>
       <slot name="overlay"></slot>
     </template>
     <div class="nac-input-box" @mousedown.stop="" @mouseup.stop="">

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

@@ -171,6 +171,13 @@ type Emits = {
 };
 const emit = defineEmits<Emits>();
 // ----------------------------------------------------------------------------
+const slots = defineSlots<{
+  default(props: { msg: string }): any;
+  overlay?(): any;
+  "right-icons"?(): any;
+  "left-icons"?(): any;
+}>();
+// ----------------------------------------------------------------------------
 // ----------------------------------------------------------------------------
 // [ getCurrentInstance ]
 const uid = useId();
@@ -733,15 +740,19 @@ const computedIsFocusOpenBtn = computed(() => {
     :warn-time-out="props.warnTimeOut"
     :size="props.size"
   >
-    <template v-if="!props.readonly" #left-icons="{ disabled: iconDisabled }">
+    <template v-if="slots.overlay" #overlay>
+      <slot name="overlay"></slot>
+    </template>
+    <template v-if="!props.readonly" #left-icons>
+      <slot name="left-icons" :disabled="disabled" />
       <button
         ref="openBtn"
         data-sep="right"
         data-icon="calendar"
         :tabindex="tabindex"
-        :disabled="iconDisabled"
+        :disabled="disabled"
         :class="
-          !iconDisabled
+          !disabled
             ? 'cursor-pointer hover:bg-accent1/[0.1] active:bg-accent1/[0.2]'
             : ''
         "
@@ -821,20 +832,20 @@ const computedIsFocusOpenBtn = computed(() => {
         {{ props.mode === "month" ? "Now" : "Today" }}
       </span>
     </div>
-    <template
-      v-if="!props.hideDeleteBtn && !props.readonly"
-      #right-icons="{ disabled: iconDisabled }"
-    >
-      <div
-        :class="
-          !iconDisabled
-            ? 'text-error cursor-pointer hover:bg-error/[0.1] active:bg-error/[0.2]'
-            : ''
-        "
-        @click="iconEventDelete()"
-      >
-        <i class="fa-solid fa-delete-left"></i>
-      </div>
+    <template v-if="slots['right-icons']" #right-icons>
+      <template v-if="!props.hideDeleteBtn && !props.readonly">
+        <div
+          :class="
+            !disabled
+              ? 'text-error cursor-pointer hover:bg-error/[0.1] active:bg-error/[0.2]'
+              : ''
+          "
+          @click="iconEventDelete()"
+        >
+          <i class="fa-solid fa-delete-left"></i>
+        </div>
+      </template>
+      <slot name="right-icons" :disabled="disabled" />
     </template>
   </InputFrame>
 </template>

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

@@ -130,6 +130,13 @@ type Emits = {
 };
 const emit = defineEmits<Emits>();
 // ----------------------------------------------------------------------------
+const slots = defineSlots<{
+  default(props: { msg: string }): any;
+  overlay?(): any;
+  "right-icons"?(): any;
+  "left-icons"?(): any;
+}>();
+// ----------------------------------------------------------------------------
 // [ getCurrentInstance ]
 const uid = useId();
 // ----------------------------------------------------------------------------
@@ -380,6 +387,15 @@ const inputClass = computed(() => {
     :warn-time-out="props.warnTimeOut"
     :size="props.size"
   >
+    <template v-if="slots['left-icons']" #left-icons>
+      <slot name="left-icons" :disabled="disabled" />
+    </template>
+    <template v-if="slots['right-icons']" #right-icons>
+      <slot name="right-icons" :disabled="disabled" />
+    </template>
+    <template v-if="slots.overlay" #overlay>
+      <slot name="overlay"></slot>
+    </template>
     <div class="nac-input">
       <div
         class="radio-row"
@@ -479,10 +495,14 @@ const inputClass = computed(() => {
                 />
                 <div class="radio-text truncate">
                   {{ tx(row.text) }}
-                  <span v-if="row.deleted" class="text-error text-[0.7em] leading-[1em]"
+                  <span
+                    v-if="row.deleted"
+                    class="text-error text-[0.7em] leading-[1em]"
                     >※削除済み</span
                   >
-                  <span v-if="row.hidden" class="text-error text-[0.7em] leading-[1em]"
+                  <span
+                    v-if="row.hidden"
+                    class="text-error text-[0.7em] leading-[1em]"
                     >※非表示</span
                   >
                 </div>

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

@@ -129,6 +129,13 @@ type Emits = {
 };
 const emit = defineEmits<Emits>();
 // ----------------------------------------------------------------------------
+const slots = defineSlots<{
+  default(props: { msg: string }): any;
+  overlay?(): any;
+  "right-icons"?(): any;
+  "left-icons"?(): any;
+}>();
+// ----------------------------------------------------------------------------
 // [ getCurrentInstance ]
 const uid = useId();
 // ----------------------------------------------------------------------------
@@ -280,6 +287,15 @@ const selectClose = () => {
     :warn-time-out="props.warnTimeOut"
     :size="props.size"
   >
+    <template v-if="slots['left-icons']" #left-icons>
+      <slot name="left-icons" :disabled="disabled" />
+    </template>
+    <template v-if="slots['right-icons']" #right-icons>
+      <slot name="right-icons" :disabled="disabled" />
+    </template>
+    <template v-if="slots.overlay" #overlay>
+      <slot name="overlay"></slot>
+    </template>
     <div
       v-if="displayData === null"
       class="absolute inset-0 flex items-center px-1 pointer-events-none text-[0.9em]"

package/dist/runtime/components/form/text-box.vue

@@ -130,8 +130,9 @@ const emit = defineEmits<Emits>();
 // ----------------------------------------------------------------------------
 const slots = defineSlots<{
   default(props: { msg: string }): any;
-  "right-icons"(): any;
-  "left-icons"(): any;
+  overlay?(): any;
+  "right-icons"?(): any;
+  "left-icons"?(): any;
 }>();
 // ----------------------------------------------------------------------------
 // [ getCurrentInstance ]
@@ -307,10 +308,13 @@ const dataListId = ref(`textbox-list-${uid}`);
     @click="elmFocus"
   >
     <template v-if="slots['left-icons']" #left-icons>
-      <slot name="left-icons" />
+      <slot name="left-icons" :disabled="disabled" />
     </template>
     <template v-if="slots['right-icons']" #right-icons>
-      <slot name="left-icons" />
+      <slot name="right-icons" :disabled="disabled" />
+    </template>
+    <template v-if="slots.overlay" #overlay>
+      <slot name="overlay"></slot>
     </template>
     <template v-if="props.maxLen > 0" #header-right="{ defaultClass }">
       <div :class="[defaultClass, lenLabelClass]">

package/dist/runtime/components/form/value-box.vue

@@ -160,6 +160,13 @@ type Emits = {
 };
 const emit = defineEmits<Emits>();
 // ----------------------------------------------------------------------------
+const slots = defineSlots<{
+  default(props: { msg: string }): any;
+  overlay?(): any;
+  "right-icons"?(): any;
+  "left-icons"?(): any;
+}>();
+// ----------------------------------------------------------------------------
 // [ getCurrentInstance ]
 const uid = useId();
 
@@ -544,6 +551,12 @@ watch(
     :size="props.size"
     @click="elmFocus"
   >
+    <template v-if="slots['left-icons']" #left-icons>
+      <slot name="left-icons" :disabled="disabled" />
+    </template>
+    <template v-if="slots.overlay" #overlay>
+      <slot name="overlay"></slot>
+    </template>
     <div class="flex items-end justify-end">
       <div class="flex-1">
         <input
@@ -601,6 +614,7 @@ watch(
           <i class="fas fa-caret-down"></i>
         </div>
       </div>
+      <slot name="right-icons" :disabled="disabled" />
     </template>
   </InputFrame>
 </template>

package/dist/runtime/components/layout/divider-h.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+// src\runtime\components\layout\divider-h.vue
+// ----------------------------------------------------------------------------
+// DividerH
+// DividerHDividerH
+----------------------------------------------------------------------------- */
+// [ tailwind ]
+import { twMerge } from "tailwind-merge";
+// [ NUXT ]
+import { computed } from "#imports";
+// [ utils ]
+import { type ClassType, ClassTypeToString } from "../../utils/class-style";
+import { Theme, GetGolorCode } from "../../utils/theme";
+// ----------------------------------------------------------------------------
+
+// [ Props ]
+interface Props {
+  theme?: Theme;
+  size?: number;
+  span1?: number;
+  span2?: number;
+  class?: ClassType;
+}
+const props = withDefaults(defineProps<Props>(), {
+  theme: Theme.main2,
+  size: 2,
+  span1: 4,
+  span2: 8,
+  class: "",
+});
+
+const style = computed(() => {
+  return [
+    `--main-color:${GetGolorCode(props.theme)};`,
+    `--size:${props.size}px;`,
+    `--span1:${props.span1}px;`,
+    `--span2:${props.span2}px;`,
+  ];
+});
+const classStyle = computed(() => {
+  return twMerge("h-[var(--size)] w-full", ClassTypeToString(props.class));
+});
+</script>
+
+<template>
+  <div class="divider" :class="classStyle" :style="style"></div>
+</template>
+
+<style scoped>
+.divider {
+  background-image: linear-gradient(to right, var(--main-color), var(--main-color) var(--span1), transparent var(--span1), transparent var(--span2));
+  background-size: var(--span2) var(--span1);
+  background-repeat: repeat-x;
+  background-position: left bottom;
+}
+</style>

package/package.json

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