nuxt-hs-ui 1.0.1

package/README.md

@@ -0,0 +1,4 @@
+
+# Hare-Systems NUXT UI Pack
+
+.....

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,8 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    prefix: 'tw-' | '';
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.d.ts

@@ -0,0 +1,8 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    prefix: 'tw-' | '';
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "nuxt-hs-ui",
+  "configKey": "hsui",
+  "version": "1.0.1",
+  "builder": {
+    "@nuxt/module-builder": "0.7.1",
+    "unbuild": "2.0.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,92 @@
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
+import { defu } from 'defu';
+
+const twConfig = {
+  prefix: "",
+  plugins: [
+    // plugin(function ({ addVariant }) {
+    //   addVariant('hover', '@media(hover:hover){ &:where(:any-link, :enabled, summary):hover }');
+    // }),
+  ],
+  theme: {
+    // screens: {
+    //   400: '400px',
+    //   600: '600px',
+    //   sm: '640px',
+    //   md: '768px',
+    //   800: '800px',
+    //   1000: '1000px',
+    //   lg: '1024px',
+    //   1200: '1200px',
+    //   xl: '1280px',
+    //   1400: '1400px',
+    //   '2xl': '1536px',
+    //   1600: '1600px',
+    //   1800: '1800px',
+    // },
+    fontFamily: {
+      //   // en: ["'Archivo Black'", 'sans-serif'],
+      // body: ["'Noto Sans JP'", 'sans-serif'],
+      //   // abel: ["'Abel'", 'sans-serif'],
+    },
+    extend: {
+      colors: {
+        fore1: "#0d2b13",
+        main0: "#192a61",
+        main1: "#1c03a2",
+        main2: "#4443ff",
+        main3: "#628cff",
+        accent1: "#ff8000",
+        accent2: "#ffac7c",
+        info: "#2badd5",
+        link: "#6200EE",
+        download: "#11691f",
+        success: "#2bb60c",
+        warn: "#EAB000",
+        error: "#d80329",
+        dark: "#224466",
+        back: "#EDF2F7"
+      }
+    }
+  }
+};
+
+const module = defineNuxtModule({
+  meta: {
+    name: "nuxt-hs-ui",
+    configKey: "hsui"
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {
+    prefix: ""
+  },
+  async setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    nuxt.options.runtimeConfig.public.hsui = defu(nuxt.options.runtimeConfig.public.hsui, {
+      prefix: options.prefix || ""
+    });
+    addComponentsDir({
+      path: resolve("runtime/components")
+    });
+    addImportsDir(resolve("runtime/composables"));
+    nuxt.options.css.push(resolve("runtime/style.css"));
+    await installModule("@nuxtjs/tailwindcss", {
+      // module configuration
+      exposeConfig: true,
+      config: {
+        ...twConfig,
+        ...options,
+        content: {
+          files: [
+            //
+            resolve("./runtime/components/**/*.{vue,mjs,ts}"),
+            resolve("./runtime/*.{mjs,js,ts}")
+          ]
+        }
+      }
+    });
+    await installModule("@pinia/nuxt");
+  }
+});
+
+export { module as default };

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

@@ -0,0 +1,508 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+src\runtime\components\hs-fc\btn\index.vue
+// ----------------------------------------------------------------------------
+HsFcBtn
+HsFcBtnHsFcBtn
+----------------------------------------------------------------------------- */
+
+// [ vue ]
+import { computed, ref } from 'vue';
+// [ NUXT ]
+import { useId } 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 twMerge = extendTailwindMerge({
+  prefix: GetPrefix(),
+});
+
+// ----------------------------------------------------------------------------
+
+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([
+  //
+  '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([
+  //
+  '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([
+      //
+      'border-[2px]',
+      'tw-border-[2px]',
+      'bg-white',
+      'tw-bg-white',
+    ]);
+  }
+  return [];
+});
+const align = computed(() => {
+  if (props.textAlign === 'left') {
+    return RemovePrefix([
+      //
+      'justify-start',
+      'tw-justify-start',
+    ]);
+  }
+  if (props.textAlign === 'right') {
+    return RemovePrefix([
+      //
+      'justify-end',
+      'tw-justify-end',
+    ]);
+  }
+  return RemovePrefix([
+    //
+    '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>