nuxt-hs-ui 1.0.10 → 2.0.2

package/dist/runtime/components/hs-ui/aspect-box.vue

@@ -1,83 +0,0 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-src\runtime\components\hs-ui\aspect-box.vue
-// ----------------------------------------------------------------------------
-HsUiAspectBox
-HsUiAspectBoxHsUiAspectBox
------------------------------------------------------------------------------ */
-
-// [ vue ]
-import { computed } from 'vue';
-// [ NUXT ]
-import { useRuntimeConfig } from '#imports';
-// [ tailwind ]
-import { extendTailwindMerge } from 'tailwind-merge';
-import { type ClassType, ClassTypeToString } from '../../lib/class-style';
-import { GetPrefix, RemovePrefix } from '../../lib/prefix';
-// [ src > runtime > lib > * ]
-import { Int } from '../../lib/number';
-// ----------------------------------------------------------------------------
-const runtimeConfig: any = useRuntimeConfig();
-const prefix = GetPrefix(runtimeConfig);
-// ----------------------------------------------------------------------------
-const twMerge = extendTailwindMerge({
-  prefix: prefix,
-});
-// ----------------------------------------------------------------------------
-type Props = {
-  class?: ClassType | undefined;
-  /**
-   * Aspect ratio
-   * - Example:
-   *   - 1:1
-   *   - 3:2 <- Default
-   *   - 4:3
-   *   - 16:9
-   */
-  rate?: string;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  class: '',
-  rate: '3:2',
-});
-const aspectRate = computed(() => {
-  const left = Int(props.rate.replace(/^(\d*):(\d*)$/, '$1'));
-  const right = Int(props.rate.replace(/^(\d*):(\d*)$/, '$2'));
-  if (left === 0 || right === 0) return '100';
-  return ((right / left) * 100).toFixed(3);
-});
-
-const baseClass = RemovePrefix(prefix, [
-  //
-  'relative',
-  'tw-relative',
-]);
-const classStyle = computed(() => {
-  return twMerge(baseClass, ClassTypeToString(props.class));
-});
-</script>
-<template>
-  <div class="HsUiAspectContainer" :class="classStyle" :style="` --aspect-rate: ${aspectRate}%;`">
-    <div>
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.HsUiAspectContainer {
-  display: block;
-  --aspect-rate: 66.66%;
-  /* 3:2 */
-}
-.HsUiAspectContainer::before {
-  content: "";
-  display: block;
-  padding-top: var(--aspect-rate);
-}
-.HsUiAspectContainer > div {
-  position: absolute;
-  inset: 0 0 0 0;
-}
-</style>

package/dist/runtime/components/hs-ui/card-item.vue

@@ -1,141 +0,0 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-src\runtime\components\hs-ui\card-item.vue
-// ----------------------------------------------------------------------------
-HsUiCardItem
-HsUiCardItemHsUiCardItem
------------------------------------------------------------------------------ */
-
-// [ vue ]
-import { computed } from 'vue';
-// [ NUXT ]
-import { useRuntimeConfig } from '#imports';
-// [ tailwind ]
-import { extendTailwindMerge } from 'tailwind-merge';
-import { type ClassType, ClassTypeToArray } from '../../lib/class-style';
-import { GetPrefix, RemovePrefix } from '../../lib/prefix';
-// ----------------------------------------------------------------------------
-const runtimeConfig: any = useRuntimeConfig();
-const prefix = GetPrefix(runtimeConfig);
-// ----------------------------------------------------------------------------
-const twMerge = extendTailwindMerge({
-  prefix: prefix,
-});
-
-// ----------------------------------------------------------------------------
-
-interface Props {
-  class?: ClassType | undefined;
-  variant?: 'header' | 'body' | 'footer';
-  accordion?: boolean | undefined;
-  // hasCloseBtn?: boolean | undefined;
-  isOpen?: boolean | undefined;
-}
-const props = withDefaults(defineProps<Props>(), {
-  class: '',
-  variant: 'body',
-  accordion: undefined,
-  isOpen: undefined,
-  // hasCloseBtn: undefined,
-});
-type Emits = {
-  ref: [e: HTMLElement];
-  'update:isOpen': [value: boolean];
-  'bg-click': [];
-};
-const emit = defineEmits<Emits>();
-
-// ----------------------------------------------------------------------------
-
-const baseClass = RemovePrefix(prefix, [
-  //
-  'relative',
-  'tw-relative',
-  'px-2',
-  'tw-px-2',
-  'py-1',
-  'tw-py-1',
-]);
-
-const baseClassHeaderFooter = RemovePrefix(prefix, [
-  //,,
-  'relative',
-  'tw-relative',
-  // 'p-1',
-  // 'tw-p-1',
-  'bg-[#FFFFFF]',
-  'tw-bg-[#FFFFFF]',
-  'flex',
-  'tw-flex',
-  'justify-between',
-  'tw-justify-between',
-  'items-center',
-  'tw-items-center',
-  'flex-none',
-  'tw-flex-none',
-]);
-
-const baseClassBody = RemovePrefix(prefix, [
-  //
-  'relative',
-  'tw-relative',
-  // 'p-1',
-  // 'tw-p-1',
-  'bg-[#FFFFFF]',
-  'tw-bg-[#FFFFFF]',
-  'flex-1',
-  'tw-flex-1',
-  'overflow-auto',
-  'tw-overflow-auto',
-]);
-
-const pe1 = RemovePrefix(prefix, [
-  //
-  'pe-1',
-  'tw-pe-1',
-]);
-
-const showBtnStyle = RemovePrefix(prefix, [
-  //
-  'border-[1px]',
-  'tw-border-[1px]',
-  '!bg-transparent',
-  '!tw-bg-transparent',
-]);
-
-const c = computed(() => {
-  if (props.variant === 'header' || props.variant === 'footer') {
-    return baseClassHeaderFooter;
-  }
-  return baseClassBody;
-});
-
-const classStyle = computed(() => {
-  return twMerge(baseClass, c.value, props.isOpen !== undefined ? pe1 : '', ClassTypeToArray(props.class));
-});
-</script>
-<template>
-  <template v-if="props.isOpen !== undefined">
-    <div :ref="(e:any)=>emit('ref',e)" class="HsUiCardItem" :class="classStyle" @click.stop="emit('bg-click')">
-      <div class=""><slot /></div>
-      <div class="">
-        <HsFcBtn theme="white" :class="showBtnStyle" @click.stop="emit('update:isOpen', !props.isOpen)">
-          <i v-if="props.isOpen" class="fa-solid fa-chevron-up" />
-          <i v-else class="fa-solid fa-chevron-down" />
-        </HsFcBtn>
-      </div>
-    </div>
-  </template>
-  <template v-else-if="props.accordion === undefined">
-    <div :ref="(e:any)=>emit('ref',e)" class="HsUiCardItem" :class="classStyle">
-      <slot />
-    </div>
-  </template>
-  <template v-else>
-    <HsUiAccordion :open="props.accordion">
-      <div :ref="(e:any)=>emit('ref',e)" class="HsUiCardItem" :class="classStyle">
-        <slot />
-      </div>
-    </HsUiAccordion>
-  </template>
-</template>

package/dist/runtime/components/hs-ui/card.vue

@@ -1,54 +0,0 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-src\runtime\components\hs-ui\card.vue
-// ----------------------------------------------------------------------------
-HsUiCard
-HsUiCardHsUiCard
------------------------------------------------------------------------------ */
-
-// [ vue ]
-import { computed } from 'vue';
-// [ NUXT ]
-import { useRuntimeConfig } from '#imports';
-// [ tailwind ]
-import { extendTailwindMerge } from 'tailwind-merge';
-import { type ClassType, ClassTypeToString } from '../../lib/class-style';
-import { GetPrefix, RemovePrefix } from '../../lib/prefix';
-// ----------------------------------------------------------------------------
-const runtimeConfig: any = useRuntimeConfig();
-const prefix = GetPrefix(runtimeConfig);
-// ----------------------------------------------------------------------------
-const twMerge = extendTailwindMerge({
-  prefix: prefix,
-});
-
-// ----------------------------------------------------------------------------
-interface Props {
-  class?: ClassType | undefined;
-}
-const props = withDefaults(defineProps<Props>(), {
-  class: '',
-});
-
-const baseClass = RemovePrefix(prefix, [
-  //
-  'relative',
-  'tw-relative',
-  'flex',
-  'tw-flex',
-  'flex-col',
-  'tw-flex-col',
-  'border-2',
-  'tw-border-2',
-  'border-white',
-  'tw-border-white',
-]);
-const classStyle = computed(() => {
-  return twMerge(baseClass, ClassTypeToString(props.class));
-});
-</script>
-<template>
-  <div :class="classStyle">
-    <slot />
-  </div>
-</template>

package/dist/runtime/components/hs-ui/container.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-src\runtime\components\hs-ui\container.vue
-// ----------------------------------------------------------------------------
-HsUiContainer
-HsUiContainerHsUiContainer
------------------------------------------------------------------------------ */
-
-// [ node_modules ]
-// [ vue ]
-import { computed } from 'vue';
-// [ NUXT ]
-import { useRuntimeConfig } from '#imports';
-// [ tailwind ]
-import { extendTailwindMerge } from 'tailwind-merge';
-import { type ClassType, ClassTypeToString } from '../../lib/class-style';
-import { GetPrefix, RemovePrefix } from '../../lib/prefix';
-// ----------------------------------------------------------------------------
-const runtimeConfig: any = useRuntimeConfig();
-const prefix = GetPrefix(runtimeConfig);
-// ----------------------------------------------------------------------------
-const twMerge = extendTailwindMerge({
-  prefix: prefix,
-});
-// ----------------------------------------------------------------------------
-interface Props {
-  class?: ClassType | undefined;
-}
-const props = withDefaults(defineProps<Props>(), {
-  class: '',
-});
-const baseClass = RemovePrefix(prefix, [
-  //
-  'container',
-  'tw-container',
-  'mx-auto',
-  'tw-mx-auto',
-  'px-2',
-  'tw-px-2',
-]);
-
-const classStyle = computed(() => {
-  return twMerge(baseClass, ClassTypeToString(props.class));
-});
-</script>
-<template>
-  <div :class="classStyle">
-    <slot />
-  </div>
-</template>

package/dist/runtime/components/hs-ui/modal/bg.vue

@@ -1,94 +0,0 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-src\runtime\components\hs-ui\modal\bg.vue
-// ----------------------------------------------------------------------------
-HsUiModalBg
-HsUiModalBgHsUiModalBg
------------------------------------------------------------------------------ */
-
-// [ vue ]
-import { computed } from 'vue';
-// [ NUXT ]
-import { useRuntimeConfig } from '#imports';
-// [ tailwind ]
-import { extendTailwindMerge } from 'tailwind-merge';
-import { type ClassType, ClassTypeToString } from '../../../lib/class-style';
-import { GetPrefix, RemovePrefix } from '../../../lib/prefix';
-// [ components > v-ui > modal > * ]
-import { useStoreModal } from './use-ui-modal';
-// ----------------------------------------------------------------------------
-const runtimeConfig: any = useRuntimeConfig();
-const prefix = GetPrefix(runtimeConfig);
-// ----------------------------------------------------------------------------
-const twMerge = extendTailwindMerge({
-  prefix: prefix,
-});
-
-// ----------------------------------------------------------------------------
-
-type Props = {
-  class?: ClassType | undefined;
-};
-const props = withDefaults(defineProps<Props>(), {
-  class: '',
-});
-
-const vUiModal = useStoreModal();
-
-const zIndex = computed(() => {
-  if (vUiModal.state.activeList.length === 0) return -1;
-  return Math.max(...vUiModal.state.activeList.map((row) => row.zIndex)) - 1;
-});
-
-const isShow = computed(() => {
-  if (vUiModal.state.activeList.length === 0) return false;
-  return true;
-});
-
-const baseClass = RemovePrefix(prefix, [
-  //
-  'transition-opacity',
-  'tw-transition-opacity',
-  'fixed',
-  'tw-fixed',
-  'inset-0',
-  'tw-inset-0',
-  'bg-slate-800/[0.8]',
-  'tw-bg-slate-800/[0.8]',
-  'transition-opacity',
-  'tw-transition-opacity',
-]);
-
-const variableStyle = computed(() => {
-  if (isShow.value) {
-    return RemovePrefix(prefix, [
-      //
-      'pointer-events-auto',
-      'tw-pointer-events-auto',
-      'opacity-100',
-      'tw-opacity-100',
-    ]);
-  }
-  return RemovePrefix(prefix, [
-    //
-    'pointer-events-none',
-    'tw-pointer-events-none',
-    'opacity-0',
-    'tw-opacity-0',
-  ]);
-});
-
-const classStyle = computed(() => {
-  return twMerge(baseClass, variableStyle.value, ClassTypeToString(props.class));
-});
-
-const closeAll = () => {
-  vUiModal.removeAll();
-};
-</script>
-<template>
-  <Teleport to="body">
-    <!--  -->
-    <div class="VUiModalBg" :class="classStyle" :style="{ zIndex: zIndex }" @click.stop="closeAll()" />
-  </Teleport>
-</template>

package/dist/runtime/components/hs-ui/modal/index.vue

@@ -1,206 +0,0 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-src\runtime\components\hs-ui\modal\index.vue
-// ----------------------------------------------------------------------------
-HsUiModal
-HsUiModalHsUiModal
------------------------------------------------------------------------------ */
-
-// [ vue ]
-import { computed, ref, watch, nextTick, onUnmounted } from 'vue';
-// [ NUXT ]
-import { useId, useRuntimeConfig } from '#imports';
-// [ tailwind ]
-import { extendTailwindMerge } from 'tailwind-merge';
-import { type ClassType, ClassTypeToString } from '../../../lib/class-style';
-import { GetPrefix, RemovePrefix } from '../../../lib/prefix';
-
-// [ vueuse ]
-import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';
-// [ components > v-ui > modal > * ]
-import { useStoreModal } from './use-ui-modal';
-// ----------------------------------------------------------------------------
-const runtimeConfig: any = useRuntimeConfig();
-const prefix = GetPrefix(runtimeConfig);
-// ----------------------------------------------------------------------------
-const twMerge = extendTailwindMerge({
-  prefix: prefix,
-});
-// ----------------------------------------------------------------------------
-
-interface Props {
-  class?: ClassType | undefined;
-  classInner?: ClassType | undefined;
-  show: boolean;
-  mounted?: boolean;
-  zIndex?: number | undefined;
-  focusLock?: boolean;
-}
-const props = withDefaults(defineProps<Props>(), {
-  class: '',
-  classInner: '',
-  show: false,
-  mounted: true,
-  zIndex: undefined,
-  focusLock: false,
-});
-
-type Emits = {
-  close: [];
-};
-const emit = defineEmits<Emits>();
-
-// ----------------------------------------------------------------------------
-const vUiModal = useStoreModal();
-vUiModal.watch();
-const id = useId();
-const active = computed(() => {
-  return vUiModal.activeId === id;
-});
-// ----------------------------------------------------------------------------
-// [ focusTrap ]
-const focusTargetElm = ref<HTMLElement | null>(null);
-const { activate, deactivate } = useFocusTrap(focusTargetElm);
-watch(
-  () => [props.show, active.value],
-  async () => {
-    await nextTick();
-    if (!props.focusLock || !active.value || !props.show) {
-      deactivate();
-      return;
-    }
-    activate();
-  }
-);
-
-// ----------------------------------------------------------------------------
-const zOrder = computed(() => {
-  if (props.zIndex !== undefined) return props.zIndex;
-  return vUiModal.myzIndex(id).value;
-});
-if (props.show) {
-  vUiModal.add(id);
-}
-watch(
-  () => props.show,
-  (v) => {
-    if (v) {
-      vUiModal.add(id);
-    } else {
-      vUiModal.remove(id);
-    }
-  }
-);
-onUnmounted(() => {
-  vUiModal.remove(id);
-});
-const mounted = computed(() => {
-  if (props.show) return true;
-  if (props.mounted) return true;
-  return false;
-});
-// 背景色は[VUiModalBg]が担当します
-const baseClass = RemovePrefix(prefix, [
-  //
-  'p-2',
-  'tw-p-2',
-  'transition-opacity',
-  'tw-transition-opacity',
-  'fixed',
-  'tw-fixed',
-  'inset-0',
-  'tw-inset-0',
-  'flex',
-  'tw-flex',
-  'justify-center',
-  'tw-justify-center',
-  'pointer-events-none',
-  'tw-pointer-events-none',
-]);
-
-const classStyle = computed(() => {
-  return twMerge(baseClass, ClassTypeToString(props.class));
-});
-
-const innerClass = RemovePrefix(prefix, [
-  //
-  'w-full',
-  'tw-w-full',
-  'h-full',
-  'tw-h-full',
-  'p-0',
-  'tw-p-0',
-  'flex',
-  'tw-flex',
-  'flex-col',
-  'tw-flex-col',
-  'items-center',
-  'tw-items-center',
-  'overflow-auto',
-  'tw-overflow-auto',
-  'transition-opacity',
-  'tw-transition-opacity',
-  'aaaaaa',
-  'tw-aaaaaa',
-  'aaaaaa',
-  'tw-aaaaaa',
-]);
-const variableStyle = computed(() => {
-  if (props.show) {
-    return RemovePrefix(prefix, [
-      //
-      'pointer-events-auto',
-      'tw-pointer-events-auto',
-    ]);
-  }
-  return RemovePrefix(prefix, [
-    //
-    'pointer-events-none',
-    'tw-pointer-events-none',
-  ]);
-});
-
-const classInner = computed(() => {
-  return twMerge(innerClass, variableStyle.value, ClassTypeToString(props.classInner));
-});
-const closeOnBackEvent = () => {
-  emit('close');
-};
-</script>
-<template>
-  <div class="HsUiModal-Parent">
-    <ClientOnly>
-      <Teleport to="body">
-        <div
-          v-if="mounted"
-          :id="id"
-          class="HsUiModal"
-          data-show=""
-          :class="classStyle"
-          :style="{ zIndex: zOrder, opacity: props.show ? 1 : 0 }"
-          :aria-hidden="!props.show"
-        >
-          <div ref="focusTargetElm" :class="classInner" @click="closeOnBackEvent">
-            <slot />
-          </div>
-        </div>
-      </Teleport>
-    </ClientOnly>
-  </div>
-</template>
-
-<style>
-.HsUiModal > * {
-  pointer-events: none;
-}
-.HsUiModal[aria-hidden=false] > * {
-  pointer-events: all;
-}
-
-.HsUiModal-Parent {
-  opacity: 0;
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-</style>

package/dist/runtime/components/hs-ui/modal/use-ui-modal.d.ts

@@ -1,20 +0,0 @@
-interface State {
-    state: {
-        init: boolean;
-        baseIndex: number;
-        activeList: {
-            id: string;
-            zIndex: number;
-        }[];
-    };
-}
-export declare const useStoreModal: import("pinia").StoreDefinition<"HsUiStoreModal", State, {
-    activeId: (state: State & import("pinia").PiniaCustomStateProperties<State>) => string | null;
-}, {
-    watch(): void;
-    myzIndex(id: string): import("vue").ComputedRef<number>;
-    add(id: string): number;
-    remove(id: string): void;
-    removeAll(): void;
-}>;
-export {};