Merge pull request #87 from dikstub-rssa/feat/fe-public-component-69

Feat: Public Component

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>

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>

app/components/pub/custom-ui/doc-entry/field.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const props = defineProps({
+  errMessage: { type: String, default: '' },
+  defaultClass: { type: String, default: 'field grow shrink-0 overflow-hidden' },
+  class: { type: String, default: '' },
+})
+</script>
+
+<template>
+  <div :class="`${props.defaultClass} ${props.class}`">
+    <slot />
+    <div v-if="props.errMessage" class="text-red-500">{{ props.errMessage }}</div>
+  </div>
+</template>

app/components/pub/custom-ui/doc-entry/label.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  height: { type: String, default: 'default' }, // 'default' | 'compact'
+  position: { type: String, default: 'default' }, // 'default' | 'dynamic'
+  positionPoint: { type: String, default: 'lg' },
+  class: { type: String, default: '' },
+})
+
+const breakpoints = ['','sm','md','lg','xl','2xl']
+const getBreakpointIdx = (point: string) => {
+  return Math.max(0, breakpoints.findIndex(bp => bp === point))
+}
+
+const settingClass = computed(() => {
+  let cls = 'label'
+  cls += props.height === 'compact' ? ' height-compact ' : ' height-default '
+  if (props.position === 'dynamic') {
+    cls += ' ' + [
+      'text-end pe-2.5',
+      'sm:text-end pe-2.5',
+      'md:text-end pe-2.5',
+      'lg:text-end pe-2.5',
+      'xl:text-end pe-2.5',
+      '2xl:text-end pe-2.5',
+    ][getBreakpointIdx(props.positionPoint)]
+  }
+  return cls + ' ' + (props.class?.trim() || '')
+})
+</script>
+
+<template>
+  <div :class="settingClass">
+    <label>
+      <slot />
+    </label>
+  </div>
+</template>