From 43a80f92e6a25c3c770abc487a69f0887ceba0bf Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Tue, 23 Sep 2025 11:58:45 +0700
Subject: [PATCH] feat(public): create block and cell for vue

---
 .../pub/custom-ui/doc-entry/block.vue         | 77 +++++++++++++++++++
 .../pub/custom-ui/doc-entry/cell.vue          | 42 ++++++++++
 2 files changed, 119 insertions(+)
 create mode 100644 app/components/pub/custom-ui/doc-entry/block.vue
 create mode 100644 app/components/pub/custom-ui/doc-entry/cell.vue

diff --git a/app/components/pub/custom-ui/doc-entry/block.vue b/app/components/pub/custom-ui/doc-entry/block.vue
new file mode 100644
index 00000000..9a1403b4
--- /dev/null
+++ b/app/components/pub/custom-ui/doc-entry/block.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+// ---------- Imports ----------
+import { computed, useSlots } from 'vue'
+
+// Types
+const props = defineProps({
+  mode: { type: String, default: 'entry' },
+  gridPoint: { type: String, default: 'lg' },
+  cellFlex: { type: Boolean, default: true },
+  cellFlexPoint: { type: String, default: 'md' },
+  labelSize: { type: String, default: 'medium' },
+  labelSizePoint: { type: String, default: 'md' },
+  colCount: { type: Number, default: 1 },
+  defaultClass: { type: String, default: 'mb-5' },
+  class: { type: String, default: '' },
+})
+
+const slots = useSlots()
+
+// Utility functions (minimal, can be expanded)
+const breakpoints = ['grid', 'sm:grid', 'md:grid', 'lg:grid', 'xl:grid', '2xl:grid']
+const getBreakpointIdx = (point: string) => {
+  return Math.max(0, breakpoints.findIndex(bp => bp.startsWith(point)))
+}
+const labelSizes = ['small', 'medium', 'large', 'xl', '2xl']
+const getLabelSizeIdx = (size: string) => {
+  return Math.max(0, labelSizes.findIndex(s => s === size))
+}
+
+const settingClass = computed(() => {
+  const breakPointIdx = getBreakpointIdx(props.gridPoint)
+  let cls = breakpoints[breakPointIdx]
+  cls += ' gap-4 xl:gap-5 ' + [
+    'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4', 'grid-cols-5',
+    'grid-cols-6', 'grid-cols-7', 'grid-cols-8', 'grid-cols-9', 'grid-cols-10',
+  ][props.colCount - 1]
+  cls += breakPointIdx === 0 ? ' gap-3 ' : ''
+  cls += ' ' + [
+    ' [&_.cell]:!mb-0',
+    ' [&_.cell]:mb-2.5 [&_.cell]:sm:mb-0',
+    ' [&_.cell]:mb-2.5 [&_.cell]:md:mb-0',
+    ' [&_.cell]:mb-2.5 [&_.cell]:lg:mb-0',
+    ' [&_.cell]:mb-3 [&_.cell]:xl:mb-0',
+    ' [&_.cell]:mb-3 [&_.cell]:2xl:mb-0',
+  ][breakPointIdx]
+  if (props.cellFlex) {
+    cls += ' ' + [
+      '[&_.cell]:flex',
+      '[&_.cell]:sm:flex',
+      '[&_.cell]:md:flex',
+      '[&_.cell]:lg:flex',
+      '[&_.cell]:xl:flex',
+      '[&_.cell]:2xl:flex',
+    ][getBreakpointIdx(props.cellFlexPoint)]
+    cls += ' [&_.label]:sm:pt-2 ' + [
+      '[&_.label]:md:w-12 [&_.label]:xl:w-20',
+      '[&_.label]:md:w-16 [&_.label]:xl:w-24',
+      '[&_.label]:md:w-24 [&_.label]:xl:w-32',
+      '[&_.label]:md:w-32 [&_.label]:xl:w-40',
+      '[&_.label]:md:w-44 [&_.label]:xl:w-52',
+    ][getLabelSizeIdx(props.labelSize)]
+  }
+  cls += ' [&_.height-default]:pt-2 [&_.height-default]:2xl:!pt-1.5 [&_.height-compact]:!pt-1 '
+  cls += '[&_textarea]:text-xs [&_textarea]:xl:text-sm '
+  cls += '[&_label]:text-xs [&_label]:xl:text-sm'
+  return cls
+})
+</script>
+
+<template>
+  <div :class="`block ${props.defaultClass} ${settingClass} ${props.class}`">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+</style>
diff --git a/app/components/pub/custom-ui/doc-entry/cell.vue b/app/components/pub/custom-ui/doc-entry/cell.vue
new file mode 100644
index 00000000..f37259ce
--- /dev/null
+++ b/app/components/pub/custom-ui/doc-entry/cell.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  colSpan: { type: Number, default: undefined },
+  colStart: { type: Number, default: undefined },
+  colEnd: { type: Number, default: undefined },
+  class: { type: String, default: '' },
+})
+
+const settingClass = computed(() => {
+  let cls = 'cell'
+  if (props.colSpan) {
+    cls += ' ' + [
+      'col-span-1', 'col-span-2', 'col-span-3', 'col-span-4', 'col-span-5',
+      'col-span-6', 'col-span-7', 'col-span-8', 'col-span-9', 'col-span-10',
+    ][props.colSpan - 1]
+  }
+  if (props.colStart) {
+    cls += ' ' + [
+      'col-start-1', 'col-start-2', 'col-start-3', 'col-start-4', 'col-start-5',
+      'col-start-6', 'col-start-7', 'col-start-8', 'col-start-9', 'col-start-10',
+    ][props.colStart - 1]
+  }
+  if (props.colEnd) {
+    cls += ' ' + [
+      'col-end-1', 'col-end-2', 'col-end-3', 'col-end-4', 'col-end-5',
+      'col-end-6', 'col-end-7', 'col-end-8', 'col-end-9', 'col-end-10',
+    ][props.colEnd - 1]
+  }
+  if (props.class) {
+    cls += ' ' + props.class.trim()
+  }
+  return cls
+})
+</script>
+
+<template>
+  <div :class="settingClass">
+    <slot />
+  </div>
+</template>