nuxt-hs-ui 1.0.10 → 2.0.2

package/dist/runtime/components/layout/aspect-box.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+// src\runtime\components\layout\aspect-box.vue
+// ----------------------------------------------------------------------------
+// AspectBox
+// AspectBoxAspectBox
+----------------------------------------------------------------------------- */
+// [ tailwind ]
+import { twMerge } from "tailwind-merge";
+// [ NUXT ]
+import { computed } from "#imports";
+// [ utils ]
+import { type ClassType, ClassTypeToString } from "../../utils/class-style";
+import { Int } from "../../utils/number";
+// ----------------------------------------------------------------------------
+// ----------------------------------------------------------------------------
+type Props = {
+  class?: ClassType;
+  /**
+   * 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 classStyle = computed(() => {
+  return twMerge(`relative block`, ClassTypeToString(props.class));
+});
+</script>
+
+<template>
+  <div
+    class="UiAspectContainer"
+    :class="classStyle"
+    :style="` --aspect-rate: ${aspectRate}%;`"
+  >
+    <div>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.UiAspectContainer {
+  --aspect-rate: 66.66%;
+}
+.UiAspectContainer::before {
+  content: "";
+  display: block;
+  padding-top: var(--aspect-rate);
+}
+.UiAspectContainer > div {
+  position: absolute;
+  inset: 0 0 0 0;
+}
+</style>

package/dist/runtime/components/layout/card-item.vue

@@ -0,0 +1,193 @@
+<script lang="ts">
+/* ----------------------------------------------------------------------------
+// src\runtime\components\layout\card-item.vue
+// ----------------------------------------------------------------------------
+// CardItem
+// CardItemCardItem
+----------------------------------------------------------------------------- */
+
+// [ utils ]
+import { tv } from "../../utils/tv";
+import { Theme } from "../../utils/theme";
+import { ObjectKeyToMap } from "../../utils/object";
+const cardItemTv = tv({
+  slots: {
+    base: [
+      //
+      `p-2`,
+      "bg-[var(--main-color)]",
+    ],
+    btn: [`border-[1px]`],
+  },
+  variants: {
+    variant: {
+      header: {
+        base: [`flex justify-between items-center`],
+      },
+      body: {
+        base: [``],
+      },
+      footer: {
+        base: [`flex justify-between items-center`],
+      },
+    },
+    scroll: {
+      true: {
+        base: "overflow-y-auto overflow-x-hidden flex-1",
+      },
+      false: {
+        base: "flex-y-none",
+      },
+    },
+    size: {
+      xs: {
+        base: [`p-1`],
+        btn: ["text-sm  h-[30px] w-[30px]"],
+      },
+      s: {
+        base: [`p-1 ps-2`],
+        btn: ["text-sm h-[36px] w-[36px]"],
+      },
+      m: { btn: ["text-base h-[44px] w-[44px]"] },
+      l: { btn: ["text-base h-[48px] w-[48px]"] },
+      xl: { btn: ["text-lg  h-[60px] w-[60px]"] },
+    },
+    theme: ObjectKeyToMap(Theme, ""),
+  },
+  compoundVariants: [
+    ...Object.keys(Theme).map((theme) => {
+      return {
+        theme: theme,
+        class: {
+          base: [
+            ["back", "white", "warn"].includes(theme)
+              ? `text-black `
+              : "text-white ",
+          ],
+        },
+      } as any;
+    }),
+  ],
+});
+</script>
+
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+// src\runtime\components\layout\card-item.vue
+// ----------------------------------------------------------------------------
+// CardItem
+// CardItemCardItem
+----------------------------------------------------------------------------- */
+
+// [ NUXT ]
+import { computed } from "#imports";
+// [ utils ]
+import { type ClassType, ClassTypeToString } from "../../utils/class-style";
+import { GetGolorCode } from "../../utils/theme";
+// [ Components ]
+import Btn from "../form/btn.vue";
+import Accordion from "./accordion.vue";
+// ----------------------------------------------------------------------------
+// ----------------------------------------------------------------------------
+interface Props {
+  class?: ClassType;
+  variant?: "header" | "body" | "footer";
+  size?: "xs" | "s" | "m" | "l" | "xl";
+  accordion?: boolean | undefined;
+  theme?: Theme | undefined;
+  scroll?: boolean;
+  open?: boolean | undefined;
+  cross?: boolean;
+  // btn?: "cross" | "accordion" | undefined;
+}
+const props = withDefaults(defineProps<Props>(), {
+  class: "",
+  variant: "body",
+  size: "m",
+  theme: undefined,
+  scroll: false,
+  accordion: undefined,
+  open: undefined,
+  btn: undefined,
+  cross: false,
+});
+type Emits = {
+  ref: [e: HTMLElement];
+  "update:open": [value: boolean];
+  "bg-click": [];
+  toggle: [];
+};
+const emit = defineEmits<Emits>();
+
+// ----------------------------------------------------------------------------
+const bgTheme = computed(() => {
+  if (props.theme !== undefined) return props.theme;
+  if (props.variant == "header") return Theme.main1;
+  if (props.variant == "footer") return Theme.main2;
+  return Theme.back;
+});
+const styleMain = computed(() => {
+  return [
+    //
+    `--main-color:${GetGolorCode(bgTheme.value)};`,
+  ];
+});
+const classTv = computed(() => {
+  return cardItemTv({
+    variant: props.variant,
+    scroll: props.scroll,
+    theme: bgTheme.value,
+    size: props.size,
+  });
+});
+const classTvBase = computed(() => {
+  return classTv.value.base({
+    class: ClassTypeToString(props.class),
+  });
+});
+const classTvBtn = computed(() => {
+  return classTv.value.btn();
+});
+</script>
+
+<template>
+  <template v-if="props.accordion === undefined">
+    <div
+      :ref="(e:any) => emit('ref', e)"
+      :style="styleMain"
+      :class="classTvBase"
+      @click.stop="emit('bg-click')"
+    >
+      <slot />
+      <Btn
+        v-if="props.open !== undefined || props.cross"
+        theme="white"
+        variant="outlined"
+        :class="classTvBtn"
+        :size="props.size"
+        @click.stop="
+          emit('update:open', !props.open);
+          emit('toggle');
+        "
+      >
+        <i
+          v-if="props.open !== undefined && !props.cross"
+          class="fa-solid fa-chevron-down"
+          :class="{ 'rotate-180': props.open }"
+        />
+        <i v-else-if="props.cross" class="fa-solid fa-xmark" />
+      </Btn>
+    </div>
+  </template>
+  <template v-else>
+    <Accordion :open="props.accordion">
+      <div
+        :ref="(e:any) => emit('ref', e)"
+        :style="styleMain"
+        :class="classTvBase"
+      >
+        <slot />
+      </div>
+    </Accordion>
+  </template>
+</template>

package/dist/runtime/components/layout/card.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+// src\runtime\components\layout\card.vue
+// ----------------------------------------------------------------------------
+// Card
+// CardCard
+----------------------------------------------------------------------------- */
+
+// [ NUXT ]
+import { computed } from "#imports";
+// [ tailwind ]
+import { twMerge } from "tailwind-merge";
+// [ utils ]
+import { type ClassType, ClassTypeToString } from "../../utils/class-style";
+// ----------------------------------------------------------------------------
+// ----------------------------------------------------------------------------
+interface Props {
+  class?: ClassType;
+}
+const props = withDefaults(defineProps<Props>(), {
+  class: "",
+});
+
+const baseClass = [
+  //
+  "relative",
+  "flex",
+  "flex-col",
+  "border-[2px]",
+  "border-white",
+  "shadow shadow-[0px_0px_4px_0px_#000]",
+];
+const classStyle = computed(() => {
+  return twMerge(baseClass, ClassTypeToString(props.class));
+});
+</script>
+
+<template>
+  <div :class="classStyle">
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/layout/container.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+// src\runtime\components\layout\container.vue
+// ----------------------------------------------------------------------------
+// Container
+// ContainerContainer
+----------------------------------------------------------------------------- */
+
+// [ NUXT ]
+import { computed } from "#imports";
+// [ tailwind ]
+import { twMerge } from "tailwind-merge";
+// [ utils ]
+import { type ClassType, ClassTypeToString } from "../../utils/class-style";
+// ----------------------------------------------------------------------------
+// ----------------------------------------------------------------------------
+interface Props {
+  class?: ClassType;
+  fluid?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  class: "",
+  fluid: false,
+});
+const classStyle = computed(() => {
+  return twMerge(
+    "mx-auto px-2",
+    props.fluid
+      ? "w-full"
+      : "max-w-full xs:max-w-[600px] md:max-w-[700px]  lg:max-w-[950px] xl:max-w-[1200px] 2xl:max-w-[1450px]",
+    ClassTypeToString(props.class)
+  );
+});
+</script>
+
+<template>
+  <div :class="classStyle">
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/misc/breadcrumb.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+// src\runtime\components\misc\breadcrumb.vue
+// ----------------------------------------------------------------------------
+// Breadcrumb
+// BreadcrumbBreadcrumb
+----------------------------------------------------------------------------- */
+
+// [ tailwind ]
+import { twMerge } from "tailwind-merge";
+// [ NUXT ]
+import { computed } from "#imports";
+// [ utils ]
+import { type ClassType, ClassTypeToString } from "../../utils/class-style";
+
+import Card from "../layout/card.vue";
+import CardItem from "../layout/card-item.vue";
+// ----------------------------------------------------------------------------
+
+interface Props {
+  class?: ClassType;
+  links: { label: string; to?: string }[];
+}
+const props = withDefaults(defineProps<Props>(), {
+  class: "",
+});
+
+const classStyle = computed(() => {
+  return twMerge(`w-full  min-w-0`, ClassTypeToString(props.class));
+});
+</script>
+
+<template>
+  <Card :class="classStyle">
+    <CardItem
+      class="px-1 py-1 sm:px-4 sm:py-1 min-w-0"
+      theme="back"
+      variant="body"
+    >
+      <div class="flex flex-wrap gap-[2px] sm:gap-[4px]">
+        <template v-for="(item, index) in props.links" :key="index">
+          <div class="truncate min-w-0 w-full sm:w-auto">
+            <NuxtLink
+              v-if="item.to !== undefined"
+              :to="item.to"
+              class="text-main1"
+              :class="{ hasBefore: index !== 0 }"
+            >
+              {{ item.label }}
+            </NuxtLink>
+            <span
+              v-else
+              class="text-gray-600"
+              :class="{ hasBefore: index !== 0 }"
+            >
+              {{ item.label }}
+            </span>
+          </div>
+        </template>
+      </div>
+    </CardItem>
+  </Card>
+</template>
+
+<style scoped>
+.hasBefore {
+  padding-left: calc(1em + 4px);
+}
+
+.hasBefore::before {
+  content: "\f054";
+  font-family: "Font Awesome 6 Free";
+  font-weight: 900;
+  color: #4b5563;
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 1em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.hov::before {
+  content: "";
+  position: absolute;
+  inset: auto auto 0 0;
+  width: 0;
+  height: 1px;
+  background-color: white;
+  transition: all 300ms ease;
+}
+
+.hov:hover::before {
+  width: 100%;
+}
+</style>

package/dist/runtime/components/misc/tabulator.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+// src\runtime\components\misc\tabulator.vue
+// ----------------------------------------------------------------------------
+// Tabulator
+// TabulatorTabulator
+----------------------------------------------------------------------------- */
+
+// ----------------------------------------------------------------------------
+// [ node_modules ]
+import { TabulatorFull as Tabulator } from "tabulator-tables";
+// [ NUXT ]
+import { ref, watch, computed, onMounted, onUnmounted } from "#imports";
+// ----------------------------------------------------------------------------
+// [ utils ]
+import { Option } from "../../utils/tabulator";
+// [ composables ]
+import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
+// ----------------------------------------------------------------------------
+// ----------------------------------------------------------------------------
+const multiLang = useHsMultiLang();
+// ----------------------------------------------------------------------------
+// [ Props ]
+type Props = {
+  columns: any[];
+  rows: any[];
+  rowCountHeight?: number;
+  option?: any;
+};
+const props = withDefaults(defineProps<Props>(), {
+  rowCountHeight: 0,
+  option: () => Option(),
+});
+// [ emit ]
+type Emits = {
+  "row-click": [data: any];
+  "row-dbl-click": [data: any];
+  init: [flag: boolean];
+  tabulator: [tabulator: any];
+  "table-rebuild": [func: () => void];
+  "table-redraw": [func: () => void];
+  "table-refresh": [func: () => void];
+  "table-refresh-stop-toggle": [func: (flag: boolean) => void];
+};
+const emit = defineEmits<Emits>();
+// [ reactive ]
+const table = ref<HTMLElement | null>(null); // reference to your table element
+const tabulator = ref<any>(null); // variable to hold your table
+
+// const data = computed(() => {
+//   return [...props.rows];
+// });
+const data = computed(() => {
+  return props.rows;
+});
+// ----------------------------------------------------------------------------
+
+const refreshStopFlag = ref(false);
+watch(
+  () => props.rows,
+  () => {
+    // console.log(ct, 'watch rows', props.rows);
+    if (table.value === null) return;
+    if (isInit.value && tabulator.value !== null && !refreshStopFlag.value) {
+      tabulator.value.replaceData(data.value as any);
+    }
+  },
+  { deep: true }
+);
+
+watch(
+  () => multiLang.state.lang,
+  () => {
+    // console.log(ct, 'watch multiLang', multiLang.lang);
+    if (table.value === null) return;
+    // console.log('watch  > prop.lang', tabulator.value);
+    tabulator.value.setLocale(multiLang.state.lang);
+    // console.log('watch  > prop.lang', tabulator.value.redraw);
+    tabulator.value.redraw(true);
+  }
+);
+
+// [▼ 初期化 ▼]
+Tabulator.extendModule("localize", "langs", Option().langs);
+const isInit = ref(false);
+
+watch(isInit, (value) => {
+  emit("init", value);
+});
+
+watch(
+  () => props.columns,
+  () => {
+    // console.log(ct, 'watch columns', value);
+    if (table.value === null) return;
+    if (isInit.value) {
+      tabulator.value.setColumns(props.columns);
+    }
+  }
+);
+
+const initTabulator = () => {
+  // console.log(ct, 'initTabulator');
+  if (table.value === null) return;
+  let height = 0;
+  if (props.rowCountHeight !== 0) {
+    height = props.rowCountHeight * 39 + 85 + 2;
+  }
+  const option = props.option;
+  option.height = height === 0 ? "" : height;
+  option.columns = props.columns;
+  option.data = data.value;
+  option.reactiveData = false;
+  tabulator.value = new Tabulator(table.value, option);
+  tabulator.value.on("rowClick", (e: any, row: any) => {
+    emit("row-click", row._row.data);
+    e.stopPropagation();
+  });
+  tabulator.value.on("rowDblClick", (e: any, row: any) => {
+    emit("row-dbl-click", row._row.data);
+    e.stopPropagation();
+  });
+  tabulator.value.on("tableBuilding", () => (isInit.value = false));
+  const beforeRows = option.data.length;
+  let buildingFlag = true;
+  tabulator.value.on("tableBuilt", () => {
+    // console.log(ct, 'tableBuilt');
+    const afterRows = props.rows.length;
+    if (buildingFlag && beforeRows !== afterRows) {
+      buildingFlag = false;
+      tabulator.value.replaceData(data.value as any);
+    }
+    isInit.value = true;
+  });
+  tabulator.value.on("tableDestroyed", () => (isInit.value = false));
+
+  // 親コントロールへtableを伝達
+  emit("tabulator", tabulator.value);
+  // ----------------------------------------
+
+  /** 意図的にテーブルを再描画する */
+  const reBuild = () => {
+    // console.log(ct, 'reBuild');
+    if (tabulator.value === null || isInit.value === false) return;
+    tabulator.value.destroy();
+    tabulator.value = null;
+    initTabulator();
+  };
+  emit("table-rebuild", reBuild);
+  // ----------------------------------------
+
+  /** 意図的にテーブルを再描画する   */
+  const redraw = () => {
+    if (tabulator.value === null || isInit.value === false) return;
+    tabulator.value.redraw(true);
+  };
+  emit("table-redraw", redraw);
+  // ----------------------------------------
+
+  const tableRefreshStopToggle = (flag: boolean) => {
+    // console.log('tableRefreshStopToggle', flag);
+    refreshStopFlag.value = flag;
+  };
+  emit("table-refresh-stop-toggle", tableRefreshStopToggle);
+
+  /** 意図的にテーブルデータをリフレッシュする */
+  const refresh = async () => {
+    if (tabulator.value === null || isInit.value === false) return;
+    await tabulator.value.replaceData(data.value as any);
+  };
+  emit("table-refresh", refresh);
+};
+// ----------------------------------------
+
+onMounted(() => {
+  initTabulator();
+});
+onUnmounted(() => {
+  tabulator.value.destroy();
+  tabulator.value = null;
+});
+// ----------------------------------------------------------------------------
+</script>
+
+<template>
+  <div ref="table"></div>
+</template>

package/dist/runtime/components/misc/view-name-display-target.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+/* ----------------------------------------------------------------------------
+// src\runtime\components\misc\view-name-display-target.vue
+// ----------------------------------------------------------------------------
+// ViewNameDisplayTarget
+// ViewNameDisplayTargetViewNameDisplayTarget
+----------------------------------------------------------------------------- */
+
+// [ NUXT ]
+import { computed } from "#imports";
+// ----------------------------------------------------------------------------
+// [ Props ]
+interface Props {
+  // isShow: boolean;
+  offset?: number|string;
+  target: HTMLElement | null;
+}
+const props = withDefaults(defineProps<Props>(), {
+  offset: 10,
+});
+type Emits = {
+  "update:target": [e: HTMLElement];
+};
+const emit = defineEmits<Emits>();
+const style = computed(() => {
+  return `margin-top:-${props.offset}px;z-index:999;`;
+});
+const setRef = (e: HTMLElement) => {
+  emit("update:target", e);
+};
+</script>
+
+<template>
+  <div
+    :ref="(e:any) => setRef(e)"
+    class="absolute top-0 pointer-events-none"
+    :style="style"
+  ></div>
+</template>