nuxt-hs-ui 1.0.1

package/dist/runtime/components/hs-fc/btn/line-loading.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+src\runtime\components\hs-fc\btn\line-loading.vue
+// ----------------------------------------------------------------------------
+HsFcBtnLineLoading
+HsFcBtnLineLoadingHsFcBtnLineLoading
+----------------------------------------------------------------------------- */
+
+// [ vue ]
+import { computed } from 'vue';
+// // [ tailwind ]
+import { extendTailwindMerge } from 'tailwind-merge';
+import { type ClassType, ClassTypeToString } from '../../../lib/com';
+import { GetPrefix, RemovePrefix } from '../../../lib/prefix';
+
+// ----------------------------------------------------------------------------
+const twMerge = extendTailwindMerge({
+  prefix: GetPrefix(),
+});
+
+// ----------------------------------------------------------------------------
+interface Props {
+  class?: ClassType;
+  show: boolean;
+  height?: number | undefined;
+  speed?: number | undefined;
+}
+const props = withDefaults(defineProps<Props>(), {
+  height: 5,
+  speed: 1000,
+  class: '',
+});
+// ----------------------------------------------------------------------------
+const baseClass = RemovePrefix([
+  //
+  'absolute',
+  'tw-absolute',
+  'inset-0',
+  'tw-inset-0',
+  'bg-indigo-600/[0.6]',
+  'tw-bg-indigo-600/[0.6]',
+  'flex',
+  'tw-flex',
+  'justify-center',
+  'tw-justify-center',
+  'items-center',
+  'tw-items-center',
+  'transition-opacity',
+  'tw-transition-opacity',
+]);
+const classStyle = computed(() => {
+  return twMerge(baseClass, ClassTypeToString(props.class));
+});
+// ----------------------------------------------------------------------------
+</script>
+<template>
+  <div class="HsFcBtnLineLoading" :class="[classStyle, { show: props.show }]">
+    <!-- <div class="circleloader"></div> -->
+    <span
+      class="loader"
+      :style="`--HsFcBtnLineLoading-height:${props.height}px;--HsFcBtnLineLoading-speed:${props.speed}ms`"
+    />
+  </div>
+</template>
+<style scoped>
+.HsFcBtnLineLoading {
+  opacity: 0;
+  pointer-events: none;
+  user-select: none;
+  padding: 0 10%;
+}
+.HsFcBtnLineLoading.show {
+  opacity: 1;
+}
+
+.loader {
+  width: 100%;
+  height: var(--HsFcBtnLineLoading-height);
+  display: inline-block;
+  position: relative;
+  background: rgba(255, 255, 255, 0.15);
+  overflow: hidden;
+  border-radius: calc(infinity * 1px);
+}
+
+.loader::after {
+  content: "";
+  width: 50%;
+  height: var(--HsFcBtnLineLoading-height);
+  background: #fff;
+  position: absolute;
+  border-radius: calc(infinity * 1px);
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  animation: HsFcBtnLineLoading-anime var(--HsFcBtnLineLoading-speed) linear infinite;
+}
+</style>
+
+<style lang="scss">
+@keyframes HsFcBtnLineLoading-anime {
+  0% {
+    opacity: 0;
+    left: 0;
+    transform: translateX(-200%);
+  }
+  20% {
+    opacity: 1;
+    left: 0;
+    transform: translateX(-200%);
+  }
+  80% {
+    opacity: 1;
+    left: 100%;
+    left: 0;
+    transform: translateX(200%);
+  }
+  100% {
+    left: 100%;
+    left: 0;
+    transform: translateX(200%);
+    opacity: 0;
+  }
+}
+</style>

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

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+src\runtime\components\hs-ui\accordion.vue
+// ----------------------------------------------------------------------------
+HsUiAccordion
+HsUiAccordionHsUiAccordion
+----------------------------------------------------------------------------- */
+
+// [ vue ]
+import { computed, ref, watch, nextTick } from 'vue';
+// [ tailwind ]
+import { extendTailwindMerge } from 'tailwind-merge';
+import { type ClassType, ClassTypeToString } from '../../lib/class-style';
+import { GetPrefix, RemovePrefix } from '../../lib/prefix';
+
+// ----------------------------------------------------------------------------
+
+const twMerge = extendTailwindMerge({
+  prefix: GetPrefix(),
+});
+// ----------------------------------------------------------------------------
+// [ Props ]
+type Props = {
+  class?: ClassType | undefined;
+  open: boolean;
+  span?: number;
+};
+const props = withDefaults(defineProps<Props>(), {
+  class: '',
+  open: true,
+  span: 300,
+});
+
+const innerHidden = ref(!props.open);
+watch(
+  () => props.open,
+  (v) => {
+    //
+    if (v) {
+      setTimeout(() => {
+        if (props.open) {
+          innerHidden.value = !v;
+        }
+      }, props.span);
+    } else {
+      nextTick(() => {
+        innerHidden.value = !v;
+      });
+    }
+  }
+);
+
+const baseClass = RemovePrefix([
+  //
+  'w-full',
+  'tw-w-full',
+]);
+
+const classStyle = computed(() => {
+  return twMerge(baseClass, ClassTypeToString(props.class));
+});
+const classOverflow = RemovePrefix([
+  //
+  'overflow-y-hidden',
+  'tw-overflow-y-hidden',
+]);
+const overflowClass = computed(() => {
+  if (innerHidden.value) return classOverflow;
+  return '';
+});
+// ----------------------------------------------------------------------------
+</script>
+<template>
+  <div
+    class="HsUiAccordion"
+    :class="[{ open: open }, classStyle]"
+    :style="`--hsui-accordion-span:${props.span}ms`"
+    :aria-hidden="!props.open"
+  >
+    <div :class="overflowClass"><slot/></div>
+  </div>
+</template>
+
+<style scoped>
+.HsUiAccordion {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--hsui-accordion-span);
+}
+.HsUiAccordion.open {
+  grid-template-rows: 1fr;
+}
+</style>

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

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+src\runtime\components\hs-ui\aspect-box.vue
+// ----------------------------------------------------------------------------
+HsUiAspectBox
+HsUiAspectBoxHsUiAspectBox
+----------------------------------------------------------------------------- */
+
+// [ vue ]
+import { computed } from 'vue';
+// [ 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 twMerge = extendTailwindMerge({
+  prefix: GetPrefix(),
+});
+// ----------------------------------------------------------------------------
+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([
+  //
+  '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/block-loading.vue

@@ -0,0 +1,210 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+src\runtime\components\hs-ui\block-loading.vue
+// ----------------------------------------------------------------------------
+HsUiBlockLoading
+HsUiBlockLoadingHsUiBlockLoading
+----------------------------------------------------------------------------- */
+
+// [ vue ]
+import { computed } from 'vue';
+// [ tailwind ]
+import { extendTailwindMerge } from 'tailwind-merge';
+import { type ClassType, ClassTypeToString } from '../../lib/class-style';
+import { GetPrefix, RemovePrefix } from '../../lib/prefix';
+// ----------------------------------------------------------------------------
+const twMerge = extendTailwindMerge({
+  prefix: GetPrefix(),
+});
+// ----------------------------------------------------------------------------
+type Props = {
+  class?: ClassType | undefined;
+  show: boolean;
+  message?: string;
+};
+const props = withDefaults(defineProps<Props>(), {
+  class: '',
+  show: false,
+  message: 'Loading',
+});
+const baseClass = RemovePrefix([
+  //
+  'px-2',
+  'tw-px-2',
+  'pt-2',
+  'tw-pt-2',
+  'pb-1',
+  'tw-pb-1',
+  'absolute',
+  'tw-absolute',
+  'inset-0',
+  'tw-inset-0',
+  'h-full',
+  'tw-h-full',
+  'w-full',
+  'tw-w-full',
+  'overflow-hidden',
+  'tw-overflow-hidden',
+  'bg-[#13175C]/[0.5]',
+  'tw-bg-[#43536E]/[0.5]',
+  'flex',
+  'tw-flex',
+  'items-center',
+  'tw-items-center',
+  'justify-center',
+  'tw-justify-center',
+  'transition-opacity',
+  'tw-transition-opacity',
+]);
+
+const variableStyle = computed(() => {
+  if (props.show) {
+    return RemovePrefix([
+      //
+      'pointer-events-auto',
+      'tw-pointer-events-auto',
+      'opacity-100',
+      'tw-opacity-100',
+    ]);
+  }
+  return RemovePrefix([
+    //
+    'pointer-events-none',
+    'tw-pointer-events-none',
+    'opacity-0',
+    'tw-opacity-0',
+  ]);
+});
+
+const classStyle = computed(() => {
+  return twMerge(baseClass, variableStyle.value, ClassTypeToString(props.class));
+});
+</script>
+<template>
+  <div class="HsUiBlockLoading" :class="[classStyle]">
+    <div class="loading-container">
+      <div class="loading-item">
+        <div class="loading-ball"/>
+        <div class="loading-ball"/>
+        <div class="loading-ball"/>
+      </div>
+      <div class="loading-text">{{ props.message }}</div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.loading-container {
+  width: 50%;
+  max-width: 200px;
+  max-height: min(90%, 160px);
+}
+.loading-container::before {
+  content: "";
+  display: block;
+  padding-top: 56.25%;
+  padding-top: 40%;
+}
+
+.loading-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 20px;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(100% - 20px);
+}
+
+.loading-ball {
+  height: 100%;
+  width: 40px;
+  max-width: 60px;
+}
+.loading-ball::before, .loading-ball::after {
+  left: 10px;
+  position: absolute;
+  content: "";
+  display: block;
+  border-radius: 50%;
+  background-color: red;
+}
+.loading-ball::before {
+  z-index: 1;
+  top: 0px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: rgb(255, 255, 255);
+  animation: HsUiBlockLoading-anime1 0.5s alternate infinite ease;
+}
+.loading-ball::after {
+  z-index: 0;
+  bottom: 0px;
+  width: 16px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: rgb(35, 32, 55);
+  animation: HsUiBlockLoading-anime2 0.5s alternate infinite ease;
+}
+.loading-ball:nth-child(2)::before, .loading-ball:nth-child(2)::after {
+  animation-delay: 0.2s;
+}
+.loading-ball:nth-child(3)::before, .loading-ball:nth-child(3)::after {
+  animation-delay: 0.3s;
+}
+
+.loading-text {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: rgb(255, 255, 255);
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+</style>
+
+<style lang="scss">
+@keyframes HsUiBlockLoading-anime1 {
+  0% {
+    top: calc(100% - 4px);
+    height: 5px;
+    border-radius: 50% 50% 25% 25%;
+    transform: scaleX(1.4);
+  }
+
+  40% {
+    height: 16px;
+    border-radius: 50%;
+    transform: scaleX(1);
+  }
+
+  100% {
+    top: 0%;
+  }
+}
+
+@keyframes HsUiBlockLoading-anime2 {
+  0% {
+    transform: scaleX(1.5);
+  }
+
+  40% {
+    transform: scaleX(1);
+    opacity: 0.7;
+  }
+
+  100% {
+    transform: scaleX(0.2);
+    opacity: 0.4;
+  }
+}
+</style>

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

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+src\runtime\components\hs-ui\card-item.vue
+// ----------------------------------------------------------------------------
+HsUiCardItem
+HsUiCardItemHsUiCardItem
+----------------------------------------------------------------------------- */
+
+// [ vue ]
+import { computed } from 'vue';
+// [ tailwind ]
+import { extendTailwindMerge } from 'tailwind-merge';
+import { type ClassType, ClassTypeToArray } from '../../lib/class-style';
+import { GetPrefix, RemovePrefix } from '../../lib/prefix';
+
+// ----------------------------------------------------------------------------
+const twMerge = extendTailwindMerge({
+  prefix: GetPrefix(),
+});
+// ----------------------------------------------------------------------------
+
+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([
+  //
+  'relative',
+  'tw-relative',
+  'px-2',
+  'tw-px-2',
+  'py-1',
+  'tw-py-1',
+]);
+
+const baseClassHeaderFooter = RemovePrefix([
+  //,,
+  '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([
+  //
+  '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([
+  //
+  'pe-1',
+  'tw-pe-1',
+]);
+
+const showBtnStyle = RemovePrefix([
+  //
+  '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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+src\runtime\components\hs-ui\card.vue
+// ----------------------------------------------------------------------------
+HsUiCard
+HsUiCardHsUiCard
+----------------------------------------------------------------------------- */
+
+// [ vue ]
+import { computed } from 'vue';
+// [ tailwind ]
+import { extendTailwindMerge } from 'tailwind-merge';
+import { type ClassType, ClassTypeToString } from '../../lib/class-style';
+import { GetPrefix, RemovePrefix } from '../../lib/prefix';
+// ----------------------------------------------------------------------------
+const twMerge = extendTailwindMerge({
+  prefix: GetPrefix(),
+});
+// ----------------------------------------------------------------------------
+interface Props {
+  class?: ClassType | undefined;
+}
+const props = withDefaults(defineProps<Props>(), {
+  class: '',
+});
+
+const baseClass = RemovePrefix([
+  //
+  '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>