@finema/core 1.4.82 → 1.4.84

package/dist/runtime/components/FlexDeck/Base.vue

@@ -0,0 +1,77 @@
+<template>
+  <!--  TODO -->
+  <div v-if="pageOptions" class="mt-4 flex justify-between px-3">
+    <p class="text-xs text-gray-500">
+      ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
+    </p>
+    <UPagination
+      v-if="pageOptions.totalPage > 1 && !isSimplePagination && !isHideBottomPagination"
+      v-model="page"
+      :page-count="pageOptions.limit"
+      :total="pageOptions.totalCount"
+    />
+    <SimplePagination
+      v-if="pageOptions.totalPage > 1 && isSimplePagination"
+      v-model="page"
+      :page-count="pageOptions.limit"
+      :total="pageOptions.totalCount"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, type PropType } from 'vue'
+import { StringHelper } from '#core/utils/StringHelper'
+import { ref, watch } from '#imports'
+import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
+
+const emits = defineEmits(['pageChange'])
+
+const props = defineProps({
+  status: {
+    type: Object as PropType<IFlexDeckOptions['status']>,
+    required: true,
+  },
+  pageOptions: {
+    type: Object as PropType<IFlexDeckOptions['pageOptions']>,
+    required: false,
+  },
+  rawData: {
+    type: Array as PropType<IFlexDeckOptions['rawData']>,
+    required: true,
+  },
+  isSimplePagination: {
+    type: Boolean as PropType<IFlexDeckOptions['isSimplePagination']>,
+    default: false,
+  },
+  isHideBottomPagination: {
+    type: Boolean as PropType<IFlexDeckOptions['isHideBottomPagination']>,
+    default: false,
+  },
+})
+
+const page = ref(props.pageOptions?.currentPage || 1)
+
+const pageBetween = computed((): string => {
+  const length = props.rawData?.length
+
+  if (length === 0) {
+    return '0'
+  }
+
+  const start = (props.pageOptions!.currentPage - 1) * props.pageOptions!.limit + 1
+  const end = start + length - 1
+
+  return `${start} - ${end}`
+})
+
+const totalCountWithComma = computed((): string => {
+  return !props.pageOptions!.totalCount
+    ? '0'
+    : StringHelper.withComma(props.pageOptions!.totalCount)
+})
+
+watch(page, () => {
+  emits('pageChange', page.value)
+})
+</script>

package/dist/runtime/components/FlexDeck/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div v-if="options.isEnabledSearch" class="mb-4 flex justify-end">
+      <UInput
+        v-model="q"
+        icon="i-heroicons-magnifying-glass"
+        :placeholder="options.searchPlaceholder || 'ค้นหา...'"
+      />
+    </div>
+    <Base
+      v-bind="$attrs"
+      :raw-data="options.rawData"
+      :status="options.status"
+      :page-options="options.pageOptions"
+      :is-simple-pagination="isShowSimplePagination"
+      :is-hide-bottom-pagination="options.isHideBottomPagination"
+      @page-change="onPageChange"
+    >
+      <template v-for="(_, slot) of $slots" #[slot]="slotProps">
+        <slot :name="slot" v-bind="slotProps || {}" />
+      </template>
+    </Base>
+  </div>
+</template>
+<script lang="ts" setup>
+import { type PropType } from 'vue'
+import { _debounce, computed, ref, watch } from '#imports'
+import { useCoreConfig } from '#core/composables/useConfig'
+import Base from '#core/components/FlexDeck/Base.vue'
+import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
+
+const emits = defineEmits<{
+  (event: 'pageChange', page: number): void
+  (event: 'search', q: string): void
+}>()
+
+const props = defineProps({
+  options: { type: Object as PropType<IFlexDeckOptions>, required: true },
+})
+
+const coreConfig = useCoreConfig()
+
+const q = ref(props.options?.pageOptions.search ?? '')
+
+const isShowSimplePagination = computed(
+  (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
+)
+
+watch(
+  q,
+  _debounce((value) => {
+    emits('search', value)
+  }, 500)
+)
+
+const onPageChange = (page: number) => {
+  emits('pageChange', page)
+}
+</script>

package/dist/runtime/components/FlexDeck/types.d.ts

@@ -0,0 +1,14 @@
+import type { IPageOptions, IStatus } from '#core/types/lib';
+export interface IFlexDeckOptions<T = object> {
+    rawData: T[];
+    primary: string;
+    status: IStatus;
+    pageOptions: IPageOptions;
+    isHideToolbar?: boolean;
+    isEnabledSearch?: boolean;
+    searchPlaceholder?: string;
+    isPreventRouteChange: boolean;
+    isHideBottomPagination?: boolean;
+    isHideTopPagination?: boolean;
+    isSimplePagination?: boolean;
+}

package/dist/runtime/components/Form/FieldWrapper.vue

@@ -1,23 +1,23 @@
-<template>
-  <UFormGroup
-    :label="label"
-    :name="name"
-    :description="description"
-    :hint="hint"
-    :size="size as FormGroupSize"
-    :data-testid="name"
-    :help="help"
-    :error="errorMessage"
-    :required="!!isRequired"
-    :ui="containerUi"
-  >
-    <slot />
-  </UFormGroup>
-</template>
-
-<script lang="ts" setup>
-import { type IFieldProps } from '#core/components/Form/types'
-import type { FormGroupSize } from '#ui/types'
-
-defineProps<IFieldProps>()
-</script>
+<template>
+  <UFormGroup
+    :label="label"
+    :name="name"
+    :description="description"
+    :hint="hint"
+    :size="size as FormGroupSize"
+    :data-testid="name"
+    :help="help"
+    :error="errorMessage"
+    :required="!!isRequired"
+    :ui="containerUi"
+  >
+    <slot />
+  </UFormGroup>
+</template>
+
+<script lang="ts" setup>
+import { type IFieldProps } from '#core/components/Form/types'
+import type { FormGroupSize } from '#ui/types'
+
+defineProps<IFieldProps>()
+</script>

package/dist/runtime/components/Form/Fields.vue

@@ -1,160 +1,160 @@
-<template>
-  <div :class="['fields', $props.class]">
-    <template
-      v-for="(option, index) in options.filter((item) => !item.isHide)"
-      :key="option.props.name + index + option.type"
-    >
-      <FormInputStatic
-        v-if="option.type === INPUT_TYPES.STATIC"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputText
-        v-else-if="option.type === INPUT_TYPES.TEXT"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputNumber
-        v-else-if="option.type === INPUT_TYPES.NUMBER"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputText
-        v-else-if="option.type === INPUT_TYPES.PASSWORD"
-        :class="option.class"
-        type="password"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputText
-        v-else-if="option.type === INPUT_TYPES.EMAIL"
-        :class="option.class"
-        type="email"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputTextarea
-        v-else-if="option.type === INPUT_TYPES.TEXTAREA"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputToggle
-        v-else-if="option.type === INPUT_TYPES.TOGGLE"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputSelect
-        v-else-if="option.type === INPUT_TYPES.SELECT"
-        :class="option.class"
-        :form="form"
-        :options="option.props.options"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputRadio
-        v-else-if="option.type === INPUT_TYPES.RADIO"
-        :class="option.class"
-        :form="form"
-        :options="option.props.options"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputCheckbox
-        v-else-if="option.type === INPUT_TYPES.CHECKBOX"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputDateTime
-        v-else-if="option.type === INPUT_TYPES.DATE_TIME"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputDateTime
-        v-else-if="option.type === INPUT_TYPES.DATE"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        :disabled-time="true"
-        v-on="option.on ?? {}"
-      />
-      <FormInputUploadFileClassic
-        v-else-if="option.type === INPUT_TYPES.UPLOAD_FILE_CLASSIC"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputUploadFileClassicAuto
-        v-else-if="option.type === INPUT_TYPES.UPLOAD_FILE_CLASSIC_AUTO"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputUploadDropzone
-        v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputUploadDropzoneAuto
-        v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE_AUTO"
-        :class="option.class"
-        :form="form"
-        :request-options="option.props.requestOptions"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-    </template>
-  </div>
-</template>
-<script lang="ts" setup>
-import { type FormContext } from 'vee-validate'
-import { type IFormField, INPUT_TYPES } from '#core/components/Form/types'
-
-const props = withDefaults(
-  defineProps<{
-    form?: FormContext
-    options: IFormField[]
-    orientation?: 'horizontal' | 'vertical'
-    class?: any
-  }>(),
-  {
-    class: 'space-y-4',
-    orientation: 'vertical',
-  }
-)
-
-const getFieldBinding = (field: IFormField) => {
-  if (props.orientation === 'horizontal') {
-    return {
-      ...field.props,
-      containerUi: {
-        ...field.props.containerUi,
-        wrapper:
-          'lg:grid lg:grid-cols-3 lg:gap-4 lg:items-start ' + field.props.containerUi?.wrapper,
-        container: 'lg:col-span-2 ' + field.props.containerUi?.container,
-      },
-    }
-  }
-
-  return field.props
-}
-</script>
+<template>
+  <div :class="['fields', $props.class]">
+    <template
+      v-for="(option, index) in options.filter((item) => !item.isHide)"
+      :key="option.props.name + index + option.type"
+    >
+      <FormInputStatic
+        v-if="option.type === INPUT_TYPES.STATIC"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputText
+        v-else-if="option.type === INPUT_TYPES.TEXT"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputNumber
+        v-else-if="option.type === INPUT_TYPES.NUMBER"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputText
+        v-else-if="option.type === INPUT_TYPES.PASSWORD"
+        :class="option.class"
+        type="password"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputText
+        v-else-if="option.type === INPUT_TYPES.EMAIL"
+        :class="option.class"
+        type="email"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputTextarea
+        v-else-if="option.type === INPUT_TYPES.TEXTAREA"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputToggle
+        v-else-if="option.type === INPUT_TYPES.TOGGLE"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputSelect
+        v-else-if="option.type === INPUT_TYPES.SELECT"
+        :class="option.class"
+        :form="form"
+        :options="option.props.options"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputRadio
+        v-else-if="option.type === INPUT_TYPES.RADIO"
+        :class="option.class"
+        :form="form"
+        :options="option.props.options"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputCheckbox
+        v-else-if="option.type === INPUT_TYPES.CHECKBOX"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputDateTime
+        v-else-if="option.type === INPUT_TYPES.DATE_TIME"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputDateTime
+        v-else-if="option.type === INPUT_TYPES.DATE"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        :disabled-time="true"
+        v-on="option.on ?? {}"
+      />
+      <FormInputUploadFileClassic
+        v-else-if="option.type === INPUT_TYPES.UPLOAD_FILE_CLASSIC"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputUploadFileClassicAuto
+        v-else-if="option.type === INPUT_TYPES.UPLOAD_FILE_CLASSIC_AUTO"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputUploadDropzone
+        v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputUploadDropzoneAuto
+        v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE_AUTO"
+        :class="option.class"
+        :form="form"
+        :request-options="option.props.requestOptions"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+    </template>
+  </div>
+</template>
+<script lang="ts" setup>
+import { type FormContext } from 'vee-validate'
+import { type IFormField, INPUT_TYPES } from '#core/components/Form/types'
+
+const props = withDefaults(
+  defineProps<{
+    form?: FormContext
+    options: IFormField[]
+    orientation?: 'horizontal' | 'vertical'
+    class?: any
+  }>(),
+  {
+    class: 'space-y-4',
+    orientation: 'vertical',
+  }
+)
+
+const getFieldBinding = (field: IFormField) => {
+  if (props.orientation === 'horizontal') {
+    return {
+      ...field.props,
+      containerUi: {
+        ...field.props.containerUi,
+        wrapper:
+          'lg:grid lg:grid-cols-3 lg:gap-4 lg:items-start ' + field.props.containerUi?.wrapper,
+        container: 'lg:col-span-2 ' + field.props.containerUi?.container,
+      },
+    }
+  }
+
+  return field.props
+}
+</script>

package/dist/runtime/components/Form/InputCheckbox/index.vue

@@ -1,21 +1,21 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps" label="">
-    <UCheckbox
-      v-model="value"
-      :disabled="wrapperProps.isDisabled"
-      :name="name"
-      :label="props.label"
-      :required="isRequired"
-      :ui="ui"
-    />
-  </FieldWrapper>
-</template>
-<script lang="ts" setup>
-import { useFieldHOC } from '#core/composables/useForm'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { type ICheckboxFieldProps } from '#core/components/Form/InputCheckbox/types'
-
-const props = withDefaults(defineProps<ICheckboxFieldProps>(), {})
-
-const { value, wrapperProps } = useFieldHOC<boolean>(props)
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps" label="">
+    <UCheckbox
+      v-model="value"
+      :disabled="wrapperProps.isDisabled"
+      :name="name"
+      :label="props.label"
+      :required="isRequired"
+      :ui="ui"
+    />
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import { useFieldHOC } from '#core/composables/useForm'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import { type ICheckboxFieldProps } from '#core/components/Form/InputCheckbox/types'
+
+const props = withDefaults(defineProps<ICheckboxFieldProps>(), {})
+
+const { value, wrapperProps } = useFieldHOC<boolean>(props)
+</script>