nuxt-hs-ui 2.0.30 → 2.0.32

package/dist/module.json

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

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

@@ -9,7 +9,8 @@
 // [ node-modules ]
 import dayjs from "dayjs/esm/index";
 // flatpickr cdn 経由で使用する
-// import flatpickr from "flatpickr";
+import flatpickr from "flatpickr";
+// import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect";
 // [ vueuse ]
 import { useMounted } from "@vueuse/core";
 // [ NUXT ]
@@ -22,12 +23,16 @@ import {
   onMounted,
   nextTick,
   onUnmounted,
-  useHead,
+  // useHead,
 } from "#imports";
 // [ utils ]
 import { Sleep } from "../../utils/com";
 import type { ClassType } from "../../utils/class-style";
 import { GetTimeShiftValue, Dayjs, DayjsInit } from "../../utils/dayjs";
+// [ utils ]
+
+import { ja } from "../../types/flatpickr/ja";
+import { en } from "../../types/flatpickr/default";
 // [ composables ]
 import { useHsMisc } from "../../composables/use-hs-misc";
 import { useHsFocus } from "../../composables/use-hs-focus";
@@ -36,16 +41,16 @@ import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
 // [ Components ]
 import InputFrame from "./input-frame.vue";
 
-useHead({
-  script: [
-    //
-    // https://npmcdn.com/flatpickr@4.6.13/dist/plugins/monthSelect/index.js
-    { src: `https://npmcdn.com/flatpickr/dist/flatpickr.min.js` },
-    { src: `https://npmcdn.com/flatpickr/dist/plugins/monthSelect` },
-    { src: `https://npmcdn.com/flatpickr/dist/l10n/ja.js` },
-    { src: `https://npmcdn.com/flatpickr/dist/l10n/default.js` },
-  ],
-});
+// useHead({
+//   script: [
+//     //
+//     // https://npmcdn.com/flatpickr@4.6.13/dist/plugins/monthSelect/index.js
+//     //{ src: `https://npmcdn.com/flatpickr/dist/flatpickr.min.js` },
+//     { src: `https://npmcdn.com/flatpickr/dist/plugins/monthSelect` },
+//     { src: `https://npmcdn.com/flatpickr/dist/l10n/ja.js` },
+//     { src: `https://npmcdn.com/flatpickr/dist/l10n/default.js` },
+//   ],
+// });
 
 // ----------------------------------------------------------------------------
 // [ nac-stroe ]
@@ -69,7 +74,8 @@ type Props = {
   // ----------------------------------------------------------------------------
   // Input 種類別
   textAlign?: "left" | "center" | "right";
-  mode?: "all" | "date" | "time" | "month";
+  mode?: "all" | "date" | "time";
+  // mode?: "all" | "date" | "time" | "month";
   /** mode=time の場合、[HH:mm:ss.SSS] に固定 */
   dataFormat?: string;
   /** mode=time の場合、[HH:mm] に固定 */
@@ -209,7 +215,7 @@ const state = reactive<State>({
   date: null,
   option: {
     dateFormat: "Z",
-    locale: "ja",
+    locale: ja,
     time_24hr: true,
     minDate: undefined,
     maxDate: undefined,
@@ -348,23 +354,20 @@ const initFlatPickerOption = () => {
       state.option.noCalendar = true;
     }
   }
-  if (props.mode === "month") {
-    state.option.disableMobile = true;
-  }
   if (props.disableMobile) {
     state.option.disableMobile = true;
   }
-  if (props.mode === "month") {
-    const monthSelectPlugin = (window as any).monthSelectPlugin;
-    state.option.plugins = [
-      new monthSelectPlugin({
-        shorthand: true, // デフォルトはfalse
-        dateFormat: "m.y", // デフォルトは"F Y"
-        altFormat: "F Y", // デフォルトは"F Y"
-        theme: "dark", // デフォルトは"light"
-      }),
-    ];
-  }
+  // if (props.mode === "month") {
+  //   state.option.disableMobile = true;
+  //   state.option.plugins = [
+  //     new MonthSelectPlugin({
+  //       shorthand: true, // デフォルトはfalse
+  //       dateFormat: "m.y", // デフォルトは"F Y"
+  //       altFormat: "F Y", // デフォルトは"F Y"
+  //       theme: "dark", // デフォルトは"light"
+  //     }),
+  //   ];
+  // }
 };
 
 const onOpen = () => {
@@ -401,15 +404,14 @@ const generateFlatPickerOption = () => {
     switch (multiLang.state.lang) {
       case "jp":
       case "ja":
-        state.option.locale = "ja";
+        state.option.locale = ja;
         break;
       default:
-        state.option.locale = "en";
+        state.option.locale = en;
         break;
     }
     // state.option.position = 'above';
     // state.option.static = true;
-    const flatpickr = (window as any).flatpickr;
     state.picker = flatpickr(inputElement.value, state.option);
     state.picker.config.onChange.push(onChange);
     state.picker.config.onOpen.push(onOpen);
@@ -503,10 +505,10 @@ const datePickerToday = () => {
   if (props.readonly === true) return;
   if (props.disabled === true) return;
   if (state.date !== null) return;
-  let inputValue = dayjs();
-  if (props.mode === "month") {
-    inputValue = inputValue.startOf("month");
-  }
+  const inputValue = dayjs();
+  // if (props.mode === "month") {
+  //   inputValue = inputValue.startOf("month");
+  // }
   const d = getShiftDayjs(inputValue);
   if (checkDate(d.format("YYYY-MM-DD")) === false) {
     Toast.Warning(
@@ -843,10 +845,11 @@ const computedIsFocusOpenBtn = computed(() => {
         "
         @click.stop="datePickerToday()"
       >
-        {{ props.mode === "month" ? "Now" : "Today" }}
+        <!-- {{ props.mode === "month" ? "Now" : "Today" }} -->
+        Today
       </span>
     </div>
-    <template v-if="slots['right-icons']" #right-icons>
+    <template #right-icons>
       <template v-if="!props.hideDeleteBtn && !props.readonly">
         <div
           :class="

package/dist/runtime/types/flatpickr/default.d.ts

@@ -0,0 +1 @@
+export declare const en: any;

package/dist/runtime/types/flatpickr/default.js

@@ -0,0 +1,70 @@
+export const en = {
+  weekdays: {
+    shorthand: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    longhand: [
+      "Sunday",
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday"
+    ]
+  },
+  months: {
+    shorthand: [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec"
+    ],
+    longhand: [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ]
+  },
+  daysInMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
+  firstDayOfWeek: 0,
+  ordinal: (nth) => {
+    const s = nth % 100;
+    if (s > 3 && s < 21) return "th";
+    switch (s % 10) {
+      case 1:
+        return "st";
+      case 2:
+        return "nd";
+      case 3:
+        return "rd";
+      default:
+        return "th";
+    }
+  },
+  rangeSeparator: " to ",
+  weekAbbreviation: "Wk",
+  scrollTitle: "Scroll to increment",
+  toggleTitle: "Click to toggle",
+  amPM: ["AM", "PM"],
+  yearAriaLabel: "Year",
+  monthAriaLabel: "Month",
+  hourAriaLabel: "Hour",
+  minuteAriaLabel: "Minute",
+  time_24hr: false
+};

package/dist/runtime/types/flatpickr/ja.d.ts

@@ -0,0 +1,17 @@
+export declare const ja: {
+    weekdays: {
+        shorthand: string[];
+        longhand: string[];
+    };
+    months: {
+        shorthand: string[];
+        longhand: string[];
+    };
+    time_24hr: boolean;
+    rangeSeparator: string;
+    monthAriaLabel: string;
+    amPM: string[];
+    yearAriaLabel: string;
+    hourAriaLabel: string;
+    minuteAriaLabel: string;
+};

package/dist/runtime/types/flatpickr/ja.js

@@ -0,0 +1,51 @@
+export const ja = {
+  weekdays: {
+    shorthand: ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"],
+    longhand: [
+      "\u65E5\u66DC\u65E5",
+      "\u6708\u66DC\u65E5",
+      "\u706B\u66DC\u65E5",
+      "\u6C34\u66DC\u65E5",
+      "\u6728\u66DC\u65E5",
+      "\u91D1\u66DC\u65E5",
+      "\u571F\u66DC\u65E5"
+    ]
+  },
+  months: {
+    shorthand: [
+      "1\u6708",
+      "2\u6708",
+      "3\u6708",
+      "4\u6708",
+      "5\u6708",
+      "6\u6708",
+      "7\u6708",
+      "8\u6708",
+      "9\u6708",
+      "10\u6708",
+      "11\u6708",
+      "12\u6708"
+    ],
+    longhand: [
+      "1\u6708",
+      "2\u6708",
+      "3\u6708",
+      "4\u6708",
+      "5\u6708",
+      "6\u6708",
+      "7\u6708",
+      "8\u6708",
+      "9\u6708",
+      "10\u6708",
+      "11\u6708",
+      "12\u6708"
+    ]
+  },
+  time_24hr: true,
+  rangeSeparator: " \u304B\u3089 ",
+  monthAriaLabel: "\u6708",
+  amPM: ["\u5348\u524D", "\u5348\u5F8C"],
+  yearAriaLabel: "\u5E74",
+  hourAriaLabel: "\u6642\u9593",
+  minuteAriaLabel: "\u5206"
+};

package/package.json

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