⚠️ refactor (components): restructure components to custom-ui

2025-08-25 09:59:44 +07:00
parent 746d39ea14
commit 61b71f7e76
36 changed files with 255 additions and 73 deletions
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  classValExt?: string
+}>()
+</script>
+
+<template>
+  <div :class="`m-3 mb-5 flex-wrap md:flex ${classValExt || ''}`">
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    column?: 1 | 2 | 3
+    density?: 'default' | 'dense'
+    side?: 'default' | 'break'
+    position?: 'default' | 'dynamic'
+    class?: string
+  }>(),
+  {
+    column: 1,
+    density: 'default',
+    side: 'default',
+    position: 'default',
+    class: '',
+  },
+)
+
+const wrapperClass = computed(() => [
+  'w-full flex-shrink-0',
+
+  props.column === 1 && props.side !== 'break' ? 'pe-4 md:w-1/1 ' : '',
+  props.column === 2 && props.side !== 'break' ? 'pe-4 md:w-1/2 ' : '',
+  props.column === 3 && props.side !== 'break' ? 'pe-4 md:w-1/3' : '',
+  props.column === 2 && props.side === 'break' ? 'md:w-1/2' : '',
+  props.column === 3 && props.side === 'break' ? 'md:w-1/3' : '',
+
+  props.density !== 'dense' ? 'mb-2 md:mb-2.5 xl:mb-3' : '',
+
+  props.side !== 'break' ? 'md:flex' : '',
+
+  props.position === 'dynamic' ? 'ps-4' : props.column > 1 ? 'pe-4' : '',
+
+  props.class,
+])
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <slot />
+  </div>
+</template>
+
+<style scoped></style>
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+export interface XError {
+  message: string
+  [key: string]: any
+}
+
+defineProps<{
+  id?: string
+  errors?: Record<string, XError>
+}>()
+</script>
+
+<template>
+  <div class="grow">
+    <slot />
+    <div v-if="id && errors?.[id]" class="field-error-info">
+      {{ errors[id].message }}
+    </div>
+  </div>
+</template>
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    size?: 'default' | 'narrow' | 'wide'
+    height?: 'default' | 'compact'
+    position?: 'default' | 'dynamic'
+  }>(),
+  {
+    size: 'default',
+    height: 'default',
+    position: 'default',
+  },
+)
+
+const sizeMap = {
+  default: 'w-28 2xl:w-36',
+  narrow: 'w-24 2xl:w-28',
+  wide: 'w-44 2xl:w-48',
+} as const
+
+const heightMap = {
+  default: 'pt-2 2xl:pt-2.5',
+  compact: 'leading-[14pt]',
+} as const
+
+const positionWrapMap = {
+  default: 'pe-2 text-start',
+  dynamic: 'md:text-end',
+} as const
+
+const positionChildMap = {
+  default: '',
+  dynamic: 'block pe-2.5',
+} as const
+
+const wrapperClass = computed(() => [
+  'block shrink-0',
+  sizeMap[props.size],
+  heightMap[props.height],
+  positionWrapMap[props.position],
+])
+
+const labelClass = computed(() => positionChildMap[props.position])
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <label :class="labelClass">
+      <slot />
+    </label>
+  </div>
+</template>