nuxt-hs-ui 1.0.10 → 2.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-hs-ui",
-  "version": "1.0.10",
-  "description": "Nuxt UI Pack",
+  "version": "2.0.2",
+  "description": "My new Nuxt module",
   "repository": "https://github.com/hare-systems-ryo/nuxt-hs-ui",
   "license": "MIT",
   "author": {
@@ -15,15 +15,70 @@
       "import": "./dist/module.mjs",
       "require": "./dist/module.cjs"
     },
-    "./lib/com": {
-      "types": "./dist/runtime/lib/com.d.ts",
-      "import": "./dist/runtime/lib/com.js",
-      "require": "./dist/runtime/lib/com.js"
+    "./utils/class-style": {
+      "types": "./dist/runtime/utils/class-style.d.ts",
+      "import": "./dist/runtime/utils/class-style.js",
+      "require": "./dist/runtime/utils/class-style.js"
     },
-    "./lib/number": {
-      "types": "./dist/runtime/lib/number.d.ts",
-      "import": "./dist/runtime/lib/number.js",
-      "require": "./dist/runtime/lib/number.js"
+    "./utils/com": {
+      "types": "./dist/runtime/utils/com.d.ts",
+      "import": "./dist/runtime/utils/com.js",
+      "require": "./dist/runtime/utils/com.js"
+    },
+    "./utils/dayjs": {
+      "types": "./dist/runtime/utils/dayjs.d.ts",
+      "import": "./dist/runtime/utils/dayjs.js",
+      "require": "./dist/runtime/utils/dayjs.js"
+    },
+    "./utils/float": {
+      "types": "./dist/runtime/utils/float.d.ts",
+      "import": "./dist/runtime/utils/float.js",
+      "require": "./dist/runtime/utils/float.js"
+    },
+    "./utils/multi-lang-object": {
+      "types": "./dist/runtime/utils/multi-lang-object.d.ts",
+      "import": "./dist/runtime/utils/multi-lang-object.js",
+      "require": "./dist/runtime/utils/multi-lang-object.js"
+    },
+    "./utils/multi-lang": {
+      "types": "./dist/runtime/utils/multi-lang.d.ts",
+      "import": "./dist/runtime/utils/multi-lang.js",
+      "require": "./dist/runtime/utils/multi-lang.js"
+    },
+    "./utils/number": {
+      "types": "./dist/runtime/utils/number.d.ts",
+      "import": "./dist/runtime/utils/number.js",
+      "require": "./dist/runtime/utils/number.js"
+    },
+    "./utils/object": {
+      "types": "./dist/runtime/utils/object.d.ts",
+      "import": "./dist/runtime/utils/object.js",
+      "require": "./dist/runtime/utils/object.js"
+    },
+    "./utils/select-item": {
+      "types": "./dist/runtime/utils/select-item.d.ts",
+      "import": "./dist/runtime/utils/select-item.js",
+      "require": "./dist/runtime/utils/select-item.js"
+    },
+    "./utils/string": {
+      "types": "./dist/runtime/utils/string.d.ts",
+      "import": "./dist/runtime/utils/string.js",
+      "require": "./dist/runtime/utils/string.js"
+    },
+    "./utils/tabulator": {
+      "types": "./dist/runtime/utils/tabulator.d.ts",
+      "import": "./dist/runtime/utils/tabulator.js",
+      "require": "./dist/runtime/utils/tabulator.js"
+    },
+    "./utils/theme": {
+      "types": "./dist/runtime/utils/theme.d.ts",
+      "import": "./dist/runtime/utils/theme.js",
+      "require": "./dist/runtime/utils/theme.js"
+    },
+    "./utils/wareki": {
+      "types": "./dist/runtime/utils/wareki.d.ts",
+      "import": "./dist/runtime/utils/wareki.js",
+      "require": "./dist/runtime/utils/wareki.js"
     }
   },
   "main": "./dist/module.cjs",
@@ -36,48 +91,55 @@
     "npm": "10.5.2"
   },
   "scripts": {
+    "link": "npm run dev:prepare && npm link",
     "prepack": "nuxt-module-build build",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "release": "npm run lint &&  npm run prepack && changelogen --release && npm publish && git push --follow-tags",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
     "test": "vitest run",
     "test:watch": "vitest watch",
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.12.1",
-    "@nuxtjs/tailwindcss": "^6.12.0",
-    "@pinia/nuxt": "^0.5.1",
-    "@vueuse/core": "^10.11.0",
-    "@vueuse/integrations": "^10.11.0",
+    "@nuxt/kit": "^3.15.1",
+    "@nuxt/ui": "^2.21.0",
+    "@nuxtjs/tailwindcss": "^6.13.1",
+    "@pinia/nuxt": "^0.9.0",
+    "@vueuse/core": "^12.3.0",
+    "@vueuse/integrations": "^12.3.0",
+    "@vueuse/nuxt": "^12.3.0",
     "bignumber.js": "^9.1.2",
     "body-scroll-lock": "^4.0.0-beta.0",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.13",
     "defu": "^6.1.4",
-    "focus-trap": "^7.5.4",
-    "pinia": "^2.1.7"
+    "flatpickr": "^4.6.13",
+    "focus-trap": "^7.6.2",
+    "pinia": "^2.3.0",
+    "tabulator-tables": "^6.3.0",
+    "tailwind-merge": "^2.6.0",
+    "tailwind-variants": "^0.3.0",
+    "vue-select": "^4.0.0-beta.6"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^1.3.3",
-    "@nuxt/eslint-config": "^0.3.13",
-    "@nuxt/module-builder": "^0.7.1",
-    "@nuxt/schema": "^3.12.1",
-    "@nuxt/test-utils": "^3.13.1",
+    "@nuxt/devtools": "^1.7.0",
+    "@nuxt/eslint-config": "^0.7.5",
+    "@nuxt/module-builder": "^0.8.4",
+    "@nuxt/schema": "^3.15.1",
+    "@nuxt/test-utils": "^3.15.4",
     "@types/body-scroll-lock": "^3.1.2",
-    "@types/node": "^20.14.2",
-    "changelogen": "^0.5.5",
-    "eslint": "^8.57.0",
-    "nuxt": "^3.12.1",
-    "sass": "^1.77.5",
-    "tailwind-merge": "^2.3.0",
-    "typescript": "latest",
-    "vitest": "^1.6.0",
-    "vue-tsc": "^2.0.21"
-  },
-  "overrides": {
-    "vue": "latest"
+    "@types/node": "latest",
+    "@types/tabulator-tables": "^6.2.3",
+    "@types/vue-select": "^3.16.8",
+    "changelogen": "^0.5.7",
+    "eslint": "^9.18.0",
+    "nuxt": "^3.15.1",
+    "sass": "^1.83.4",
+    "tailwindcss": "^3.4.17",
+    "sass-embedded": "^1.83.4",
+    "typescript": "~5.7.3",
+    "vitest": "^2.1.8",
+    "vue-tsc": "^2.2.0"
   }
 }

package/dist/runtime/components/hs-fc/btn/index.vue

@@ -1,510 +0,0 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-src\runtime\components\hs-fc\btn\index.vue
-// ----------------------------------------------------------------------------
-HsFcBtn
-HsFcBtnHsFcBtn
------------------------------------------------------------------------------ */
-
-// [ vue ]
-import { computed, ref } from 'vue';
-// [ NUXT ]
-import { useId, useRuntimeConfig } from '#imports';
-// [ vueuse ]
-import { useHsFormFocus } from '../../../composables/use-hs-form-focus';
-// ----------------------------------------------------------------------------
-// [ tailwind ]
-import { extendTailwindMerge } from 'tailwind-merge';
-import { type ClassType, ClassTypeToString } from '../../../lib/class-style';
-import { GetPrefix, RemovePrefix } from '../../../lib/prefix';
-// ----------------------------------------------------------------------------
-import type { Theme } from '../../../lib/theme';
-// ----------------------------------------------------------------------------
-const runtimeConfig: any = useRuntimeConfig();
-const prefix = GetPrefix(runtimeConfig);
-
-const twMerge = extendTailwindMerge({
-  prefix: prefix,
-});
-
-// ----------------------------------------------------------------------------
-
-interface Props {
-  class?: ClassType;
-  classInner?: ClassType;
-  disabled?: boolean;
-  to?: string;
-  theme?: Theme;
-  variant?: 'outlined' | 'flat';
-  textWrap?: boolean;
-  textAlign?: 'left' | 'center' | 'right';
-  loading?: boolean;
-}
-const props = withDefaults(defineProps<Props>(), {
-  class: '',
-  classInner: '',
-  to: undefined,
-  theme: 'accent1',
-  variant: 'outlined',
-  disabled: false,
-  textWrap: false,
-  align: 'center',
-  loading: false,
-  textAlign: 'center',
-});
-
-type InputFocusEventArg = {
-  elm: HTMLElement;
-  id: string;
-};
-type Emits = {
-  id: [id: string];
-  ref: [element: HTMLElement];
-  focus: [e: InputFocusEventArg];
-  blur: [e: InputFocusEventArg];
-};
-const emit = defineEmits<Emits>();
-// ----------------------------------------------------------------------------
-const id = useId();
-emit('id', id);
-// ----------------------------------------------------------------------------
-// ----------------------------------------------------------------------------
-// Base Design
-// -----
-const baseClass = RemovePrefix(prefix, [
-  //
-  'relative',
-  'tw-relative',
-  'inline-flex',
-  'tw-inline-flex',
-  'items-center',
-  'tw-items-center',
-  'py-2',
-  'tw-py-2',
-  'px-3',
-  'tw-px-3',
-  'w-auto',
-  'leading-[1.2em]',
-  'tw-leading-[1.2em]',
-  'tw-w-auto',
-  'max-w-full',
-  'tw-max-w-full',
-  'text-ellipsis',
-  'tw-text-ellipsis',
-  'overflow-hidden',
-  'tw-overflow-hidden',
-  'disabled:opacity-50',
-  'tw-disabled:opacity-50',
-  'disabled:pointer-events-none',
-  'tw-disabled:pointer-events-none',
-]);
-const baseClassForm = RemovePrefix(prefix, [
-  //
-  'border',
-  'tw-border',
-  'border-[1px]',
-  'tw-border-[1px]',
-  'border-main1',
-  'tw-border-main1',
-  'min-h-[44px]',
-  'tw-min-h-[44px]',
-  'rounded',
-  'tw-rounded',
-  // `bg-transparent`,
-  // `tw-bg-transparent`,
-]);
-const variableStyle = computed(() => {
-  if (props.variant === 'outlined') {
-    return RemovePrefix(prefix, [
-      //
-      'border-[2px]',
-      'tw-border-[2px]',
-      'bg-white',
-      'tw-bg-white',
-    ]);
-  }
-  return [];
-});
-const align = computed(() => {
-  if (props.textAlign === 'left') {
-    return RemovePrefix(prefix, [
-      //
-      'justify-start',
-      'tw-justify-start',
-    ]);
-  }
-  if (props.textAlign === 'right') {
-    return RemovePrefix(prefix, [
-      //
-      'justify-end',
-      'tw-justify-end',
-    ]);
-  }
-  return RemovePrefix(prefix, [
-    //
-    'justify-center',
-    'tw-justify-center',
-  ]);
-});
-const classStyle = computed(() => {
-  return twMerge(baseClass, baseClassForm, ...variableStyle.value, ...align.value, ClassTypeToString(props.class));
-});
-// ----------------------------------------------------------------------------
-// Innder Design
-// -----
-const textWrapClass = computed(() => {
-  if (props.textWrap) {
-    return 'break-all text-wrap';
-  }
-  return '';
-});
-const classThisInner = computed(() => {
-  return twMerge(
-    'max-h-full max-w-full text-ellipsis overflow-hidden',
-    textWrapClass.value,
-    ClassTypeToString(props.classInner)
-  );
-});
-// ----------------------------------------------------------------------------
-//  focus, blur Event
-const vFormFocus = useHsFormFocus();
-const imputElm = ref<HTMLElement | null>(null);
-const setRef = (e: any) => {
-  imputElm.value = e;
-  emit('ref', e);
-};
-const onFocus = () => {
-  if (props.disabled) return;
-  const elm = imputElm.value;
-  if (elm === null) return;
-  vFormFocus.state.id = id;
-  emit('focus', { elm: elm, id: id });
-};
-const onBlur = () => {
-  if (props.disabled) return;
-  const elm = imputElm.value;
-  if (elm === null) return;
-  if (vFormFocus.state.id === id) {
-    vFormFocus.state.id = '';
-  }
-  emit('blur', { elm: elm, id: id });
-};
-// ----------------------------------------------------------------------------
-//  disabled
-const disabled = computed(() => {
-  if (props.disabled) return true;
-  if (props.loading) return true;
-  return false;
-});
-// ----------------------------------------------------------------------------
-</script>
-<template>
-  <button
-    v-if="props.to === undefined"
-    :ref="(e:any)=>setRef(e)"
-    type="button"
-    class="HsFcBtn"
-    :class="[classStyle, `theme-${props.theme}`, `variant-${props.variant}`]"
-    :disabled="disabled"
-    ontouchstart=""
-    @focus="onFocus()"
-    @blur="onBlur()"
-  >
-    <div class="HsFcBtn--hover HsFcBtn--overlay" />
-    <div class="HsFcBtn--active HsFcBtn--overlay" />
-    <div class="HsFcBtn--border" :class="[{ show: vFormFocus.state.id === id }]" />
-    <div :class="classThisInner"><slot /></div>
-    <HsFcBtnLineLoading class="HsFcBtn--loading" :show="props.loading" />
-  </button>
-  <NuxtLink
-    v-else
-    :ref="(e:any)=>setRef(e)"
-    :to="props.to"
-    :disabled="disabled"
-    ontouchstart=""
-    class="HsFcBtn"
-    :class="[classStyle, `theme-${props.theme}`, `variant-${props.variant}`]"
-    @focus="onFocus()"
-    @blur="onBlur()"
-  >
-    <div class="HsFcBtn--hover HsFcBtn--overlay" />
-    <div class="HsFcBtn--active HsFcBtn--overlay" />
-    <div class="HsFcBtn--border" :class="[{ show: vFormFocus.state.id === id }]" />
-    <div :class="classThisInner"><slot /></div>
-    <HsFcBtnLineLoading class="HsFcBtn--loading" :show="props.loading" />
-  </NuxtLink>
-</template>
-<style scoped>
-@charset "UTF-8";
-.HsFcBtn {
-  touch-action: manipulation;
-  appearance: none;
-  -webkit-appearance: none;
-  position: relative;
-  -webkit-tap-highlight-color: transparent;
-}
-.HsFcBtn:focus {
-  outline: none;
-}
-.HsFcBtn .HsFcBtn--loading {
-  z-index: 2;
-}
-.HsFcBtn .HsFcBtn--border {
-  position: absolute;
-  inset: 2px 2px 2px 2px;
-  border-style: solid;
-  border-width: 1px;
-  border-radius: 5px;
-  opacity: 0;
-  background-color: transparent;
-}
-.HsFcBtn .HsFcBtn--border.show {
-  opacity: 1;
-}
-.HsFcBtn * {
-  pointer-events: none !important;
-  user-select: none;
-}
-.HsFcBtn .HsFcBtn--overlay {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  z-index: 1;
-}
-.HsFcBtn.variant-outlined .HsFcBtn--hover {
-  mix-blend-mode: multiply;
-}
-.HsFcBtn.variant-outlined .HsFcBtn--active {
-  mix-blend-mode: multiply;
-}
-.HsFcBtn.variant-outlined .HsFcBtn--border {
-  border-color: inherit;
-}
-.HsFcBtn.variant-flat .HsFcBtn--hover {
-  background-color: inherit;
-  mix-blend-mode: screen;
-}
-.HsFcBtn.variant-flat .HsFcBtn--active {
-  background-color: inherit;
-  mix-blend-mode: multiply;
-  mix-blend-mode: screen;
-}
-.HsFcBtn.variant-flat .HsFcBtn--border {
-  border-color: white;
-}
-@media (hover: hover) {
-  .HsFcBtn {
-    /* hover指定できるPCを想定したスタイル */
-  }
-  .HsFcBtn:not(:active):hover.variant-outlined .HsFcBtn--hover {
-    opacity: 0.2;
-  }
-  .HsFcBtn:not(:active):hover.variant-flat .HsFcBtn--hover {
-    opacity: 0.8;
-  }
-  .HsFcBtn:active.variant-outlined .HsFcBtn--active {
-    opacity: 0.5;
-  }
-  .HsFcBtn:active.variant-flat .HsFcBtn--active {
-    opacity: 0.4;
-  }
-}
-@media (hover: none) {
-  .HsFcBtn {
-    /* hoverが使えないタッチ端末を想定した装飾 */
-  }
-  .HsFcBtn .HsFcBtn--hover {
-    opacity: 0;
-  }
-  .HsFcBtn:active.variant-outlined .HsFcBtn--active {
-    opacity: 0.4;
-  }
-  .HsFcBtn:active.variant-flat .HsFcBtn--active {
-    opacity: 0.8;
-  }
-}
-
-.variant-flat.theme-main0 {
-  background-color: theme("colors.main0");
-  color: theme("colors.white");
-}
-.variant-flat.theme-main1 {
-  background-color: theme("colors.main1");
-  color: theme("colors.white");
-}
-.variant-flat.theme-main2 {
-  background-color: theme("colors.main2");
-  color: theme("colors.white");
-}
-.variant-flat.theme-main3 {
-  background-color: theme("colors.main3");
-  color: theme("colors.white");
-}
-.variant-flat.theme-accent1 {
-  background-color: theme("colors.accent1");
-  color: theme("colors.white");
-}
-.variant-flat.theme-accent2 {
-  background-color: theme("colors.accent2");
-  color: theme("colors.white");
-}
-.variant-flat.theme-info {
-  background-color: theme("colors.info");
-  color: theme("colors.white");
-}
-.variant-flat.theme-link {
-  background-color: theme("colors.link");
-  color: theme("colors.white");
-}
-.variant-flat.theme-download {
-  background-color: theme("colors.download");
-  color: theme("colors.white");
-}
-.variant-flat.theme-success {
-  background-color: theme("colors.success");
-  color: theme("colors.white");
-}
-.variant-flat.theme-warn {
-  background-color: theme("colors.warn");
-  color: theme("colors.white");
-}
-.variant-flat.theme-error {
-  background-color: theme("colors.error");
-  color: theme("colors.white");
-}
-.variant-flat.theme-white {
-  background-color: theme("colors.white");
-  color: theme("colors.main1");
-}
-.variant-flat.theme-white .HsFcBtn--border {
-  border-color: theme("colors.gray.600");
-}
-.variant-flat.theme-black {
-  background-color: theme("colors.black");
-  color: theme("colors.white");
-}
-.variant-flat.theme-dark {
-  background-color: theme("colors.dark");
-  color: theme("colors.white");
-}
-.variant-flat.theme-back {
-  background-color: theme("colors.back");
-  color: theme("colors.main1");
-}
-.variant-flat.theme-back .HsFcBtn--border {
-  border-color: theme("colors.gray.600");
-}
-
-.variant-outlined.theme-main0 {
-  border-color: theme("colors.main0");
-  color: theme("colors.main0");
-}
-.variant-outlined.theme-main0 .HsFcBtn--overlay {
-  background-color: theme("colors.main0");
-}
-.variant-outlined.theme-main1 {
-  border-color: theme("colors.main1");
-  color: theme("colors.main1");
-}
-.variant-outlined.theme-main1 .HsFcBtn--overlay {
-  background-color: theme("colors.main1");
-}
-.variant-outlined.theme-main2 {
-  border-color: theme("colors.main2");
-  color: theme("colors.main2");
-}
-.variant-outlined.theme-main2 .HsFcBtn--overlay {
-  background-color: theme("colors.main2");
-}
-.variant-outlined.theme-main3 {
-  border-color: theme("colors.main3");
-  color: theme("colors.main3");
-}
-.variant-outlined.theme-main3 .HsFcBtn--overlay {
-  background-color: theme("colors.main3");
-}
-.variant-outlined.theme-accent1 {
-  border-color: theme("colors.accent1");
-  color: theme("colors.accent1");
-}
-.variant-outlined.theme-accent1 .HsFcBtn--overlay {
-  background-color: theme("colors.accent1");
-}
-.variant-outlined.theme-accent2 {
-  border-color: theme("colors.accent2");
-  color: theme("colors.accent2");
-}
-.variant-outlined.theme-accent2 .HsFcBtn--overlay {
-  background-color: theme("colors.accent2");
-}
-.variant-outlined.theme-info {
-  border-color: theme("colors.info");
-  color: theme("colors.info");
-}
-.variant-outlined.theme-info .HsFcBtn--hover {
-  background-color: theme("colors.info");
-}
-.variant-outlined.theme-link {
-  border-color: theme("colors.link");
-  color: theme("colors.link");
-}
-.variant-outlined.theme-link .HsFcBtn--overlay {
-  background-color: theme("colors.link");
-}
-.variant-outlined.theme-download {
-  border-color: theme("colors.download");
-  color: theme("colors.download");
-}
-.variant-outlined.theme-download .HsFcBtn--overlay {
-  background-color: theme("colors.download");
-}
-.variant-outlined.theme-success {
-  border-color: theme("colors.success");
-  color: theme("colors.success");
-}
-.variant-outlined.theme-success .HsFcBtn--overlay {
-  background-color: theme("colors.success");
-}
-.variant-outlined.theme-warn {
-  border-color: theme("colors.warn");
-  color: theme("colors.warn");
-}
-.variant-outlined.theme-warn .HsFcBtn--overlay {
-  background-color: theme("colors.warn");
-}
-.variant-outlined.theme-error {
-  border-color: theme("colors.error");
-  color: theme("colors.error");
-}
-.variant-outlined.theme-error .HsFcBtn--overlay {
-  background-color: theme("colors.error");
-}
-.variant-outlined.theme-white {
-  border-color: theme("colors.white");
-  color: theme("colors.white");
-}
-.variant-outlined.theme-white .HsFcBtn--overlay {
-  background-color: theme("colors.black");
-}
-.variant-outlined.theme-black {
-  border-color: theme("colors.black");
-  color: theme("colors.black");
-}
-.variant-outlined.theme-black .HsFcBtn--overlay {
-  background-color: theme("colors.white");
-}
-.variant-outlined.theme-dark {
-  border-color: theme("colors.dark");
-  color: theme("colors.dark");
-}
-.variant-outlined.theme-dark .HsFcBtn--overlay {
-  background-color: theme("colors.dark");
-}
-.variant-outlined.theme-back {
-  border-color: theme("colors.back");
-  color: theme("colors.back");
-}
-.variant-outlined.theme-back .HsFcBtn--overlay {
-  background-color: theme("colors.back");
-}
-</style>