nuxt-hs-ui 2.0.29 → 2.0.31

package/dist/module.json

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

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

@@ -8,10 +8,9 @@
 
 // [ node-modules ]
 import dayjs from "dayjs/esm/index";
+// flatpickr cdn 経由で使用する
 import flatpickr from "flatpickr";
 import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect";
-import { Japanese as ja } from "flatpickr/dist/l10n/ja.js";
-import { english as en } from "flatpickr/dist/l10n/default.js";
 // [ vueuse ]
 import { useMounted } from "@vueuse/core";
 // [ NUXT ]
@@ -27,8 +26,13 @@ import {
   // 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";
@@ -40,8 +44,9 @@ import InputFrame from "./input-frame.vue";
 // useHead({
 //   script: [
 //     //
-
-//     { src: `https://npmcdn.com/flatpickr/dist/flatpickr.min.js` },
+//     // 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` },
 //   ],
@@ -59,7 +64,6 @@ const hsMisc = useHsMisc();
 const isMounted = useMounted();
 // ----------------------------------------------------------------------------
 // flatpickr
-const MonthSelectPlugin: any = monthSelectPlugin;
 const timeDateFormat = "YYYY-MM-DD HH:mm:ss.SSS";
 const timeOutputDateFormat = "HH:mm:ss.SSS";
 const timeShowDateFormat = "HH:mm";
@@ -265,12 +269,11 @@ watch(
     computed(() => {
       return [props.minDate, props.maxDate, multiLang.state.lang];
     }).value,
-  () => {
+  async () => {
     // console.log('computed', props.minDate, props.maxDate, isMounted.value);
     if (!isMounted.value) return;
-    setTimeout(() => {
-      resetPicekr();
-    }, 1);
+    await Sleep(1);
+    resetPicekr();
   }
 );
 
@@ -357,7 +360,7 @@ const initFlatPickerOption = () => {
   }
   if (props.mode === "month") {
     state.option.plugins = [
-      new MonthSelectPlugin({
+      new (monthSelectPlugin as any)({
         shorthand: true, // デフォルトはfalse
         dateFormat: "m.y", // デフォルトは"F Y"
         altFormat: "F Y", // デフォルトは"F Y"
@@ -624,11 +627,15 @@ watch(computedActivate, (value) => {
   }
 });
 
-onMounted(() => {
+onMounted(async () => {
+  await Sleep(1);
+  // setTimeout(() => {
   initFlatPickerOption();
   generateFlatPickerOption();
+  // }, 1);
 });
-onUnmounted(() => {
+onUnmounted(async () => {
+  await Sleep(1);
   if (state.picker != null) {
     state.picker.destroy();
     state.picker = null;
@@ -841,7 +848,7 @@ const computedIsFocusOpenBtn = computed(() => {
         {{ props.mode === "month" ? "Now" : "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.29",
+  "version": "2.0.31",
   "description": "My new Nuxt module",
   "repository": "https://github.com/hare-systems-ryo/nuxt-hs-ui",
   "license": "MIT",