@finema/core 1.2.2 → 1.3.0

package/README.md

@@ -1,31 +1,40 @@
-<!--
-Get your module up and running quickly.
-
-Find and replace all on all files (CMD+SHIFT+F):
-- Name: My Module
-- Package name: my-module
-- Description: My new Nuxt module
--->
-
 # @finema/core Nuxt Module
 
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![License][license-src]][license-href]
-[![Nuxt][nuxt-src]][nuxt-href]
-
-@finema/core for doing amazing things.
-
-- [✨ &nbsp;Release Notes](/CHANGELOG.md)
-<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
-<!-- - [📖 &nbsp;Documentation](https://example.com) -->
+[✨ &nbsp;Release Notes](/CHANGELOG.md)
+
+## Todos
+
+- [ ] Loader
+- [ ] Button
+- [ ] Table
+- [ ] Icon
+- [ ] Badge
+- [ ] Status
+- Form
+  - [ ] Static
+  - [ ] Input
+  - [ ] Textarea
+  - [ ] Select
+  - [ ] Select multi
+  - [ ] Checkbox
+  - [ ] radio
+  - [ ] toggle
+  - [ ] datetime
+  - [ ] upload
+  - [ ] upload multi
+- [ ] Modal
+- [ ] Notification
+- [ ] Card
+- [ ] Tab
+- [ ] Alert
+- [ ] Container
+- [ ] Dropdown
 
 ## Features
 
-<!-- Highlight some of the features your module provide here -->
-- ⛰ &nbsp;Foo
-- 🚠 &nbsp;Bar
-- 🌲 &nbsp;Baz
+- UI components
+- Useful composables
+- Security
 
 ## Quick Setup
 
@@ -38,8 +47,6 @@ pnpm add -D @finema/core
 # Using yarn
 yarn add --dev @finema/core
 
-# Using npm
-npm install --save-dev @finema/core
 ```
 
 1. Add `@finema/core` to the `modules` section of `nuxt.config.ts`
@@ -79,16 +86,3 @@ npm run test:watch
 # Release new version
 npm run release
 ```
-
-<!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-version-href]: https://npmjs.com/package/my-module
-
-[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-downloads-href]: https://npmjs.com/package/my-module
-
-[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://npmjs.com/package/my-module
-
-[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
-[nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -1,5 +1,21 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
+declare const core: {
+    limit_per_page: number;
+    default_primary_key: string;
+};
+
+declare const config_core: typeof core;
+declare namespace config {
+  export { config_core as core };
+}
+
+type Strategy = 'merge' | 'override'
+
+type DeepPartial<T> = Partial<{
+  [P in keyof T]: DeepPartial<T[P]> | Record<string, string>
+}>
+
 interface ModuleOptions {
     /**
      * @default ''
@@ -10,6 +26,20 @@ interface ModuleOptions {
      */
     global?: boolean;
 }
+type CORE = {
+    strategy?: Strategy;
+    [key: string]: any;
+} & DeepPartial<typeof config>;
+declare module 'nuxt/schema' {
+    interface AppConfigInput {
+        core?: CORE;
+    }
+}
+declare module '@nuxt/schema' {
+    interface AppConfigInput {
+        core?: CORE;
+    }
+}
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
 export { type ModuleOptions, _default as default };

package/dist/module.d.ts

@@ -1,5 +1,21 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
+declare const core: {
+    limit_per_page: number;
+    default_primary_key: string;
+};
+
+declare const config_core: typeof core;
+declare namespace config {
+  export { config_core as core };
+}
+
+type Strategy = 'merge' | 'override'
+
+type DeepPartial<T> = Partial<{
+  [P in keyof T]: DeepPartial<T[P]> | Record<string, string>
+}>
+
 interface ModuleOptions {
     /**
      * @default ''
@@ -10,6 +26,20 @@ interface ModuleOptions {
      */
     global?: boolean;
 }
+type CORE = {
+    strategy?: Strategy;
+    [key: string]: any;
+} & DeepPartial<typeof config>;
+declare module 'nuxt/schema' {
+    interface AppConfigInput {
+        core?: CORE;
+    }
+}
+declare module '@nuxt/schema' {
+    interface AppConfigInput {
+        core?: CORE;
+    }
+}
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
 export { type ModuleOptions, _default as default };

package/dist/module.json

@@ -1,8 +1,8 @@
 {
   "name": "@finema/core",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "configKey": "core",
   "compatibility": {
-    "nuxt": "^3.4.0"
+    "nuxt": "^3.7.4"
   }
 }

package/dist/module.mjs

@@ -1,7 +1,89 @@
-import { defineNuxtModule, createResolver, addPlugin, addImportsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import * as lodash from 'lodash';
 
 const name = "@finema/core";
-const version = "1.2.2";
+const version = "1.3.0";
+
+const _merge = lodash.merge;
+
+const colors = {
+  black: "#20243E",
+  white: "#FFFFFF",
+  dark: {
+    DEFAULT: "#20243E",
+    50: "#6D7280",
+    100: "#505050"
+  },
+  light: {
+    DEFAULT: "#FAFAFA"
+  },
+  gray: {
+    DEFAULT: "#9095A6",
+    disabled: "#C1C4D0",
+    border: "#E2E4EA",
+    fill: "#F4F5FA"
+  },
+  customPrimary: {
+    DEFAULT: "#3675FB",
+    50: "#F8F8FF",
+    100: "#E8EFFD",
+    200: "#bee3f8",
+    300: "#90cdf4",
+    400: "#63b3ed",
+    500: "#3675FB",
+    600: "#0068FE",
+    700: "#2b6cb0",
+    800: "#2c5282",
+    900: "#20243E",
+    950: "#20243E"
+  },
+  secondary: {
+    DEFAULT: "#EE8B36",
+    50: "#fdf1e7",
+    100: "#f9d6b8",
+    200: "#f5bb89",
+    300: "#f1a05a",
+    400: "#ed852b",
+    500: "#d46b12",
+    600: "#a5540e",
+    700: "#763c0a",
+    800: "#472406",
+    900: "#180c02"
+  },
+  info: {
+    DEFAULT: "#F64976",
+    50: "#FFEBF0",
+    100: "#F87395",
+    400: "#F87395",
+    500: "#F87395"
+  },
+  danger: {
+    DEFAULT: "#FF4C4C",
+    50: "#ffe5e5",
+    100: "#FF4C4C",
+    400: "#FF4C4C",
+    500: "#FF4C4C"
+  },
+  success: {
+    DEFAULT: "#01B460",
+    50: "#E2FFF0",
+    100: "#52CB8C",
+    400: "#52CB8C",
+    500: "#52CB8C"
+  },
+  warning: {
+    DEFAULT: "#EE7336",
+    50: "#FFEBE2",
+    100: "#FF864B",
+    400: "#FF864B",
+    500: "#FF864B"
+  }
+};
+
+const ui = {
+  primary: "customPrimary",
+  safelistColors: ["secondary"]
+};
 
 const module = defineNuxtModule({
   meta: {
@@ -9,19 +91,84 @@ const module = defineNuxtModule({
     version,
     configKey: "core",
     compatibility: {
-      nuxt: "^3.4.0"
+      nuxt: "^3.7.4"
     }
   },
   // Default configuration options of the Nuxt module
   defaults: {},
-  setup(options, nuxt) {
+  async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
     const runtimeDir = resolve("./runtime");
     nuxt.options.build.transpile.push(runtimeDir);
+    nuxt.options.alias["#core"] = runtimeDir;
+    nuxt.options.css.push(resolve(runtimeDir, "ui.css"));
+    nuxt.options.appConfig.app = {
+      strategy: "merge"
+    };
+    nuxt.hook("tailwindcss:config", (tailwindConfig) => {
+      tailwindConfig.content = {
+        ...tailwindConfig.content,
+        files: [
+          ...tailwindConfig.content.files,
+          resolve(runtimeDir, "components/**/*.{vue,mjs,ts}"),
+          resolve(runtimeDir, "*.{mjs,js,ts}")
+        ]
+      };
+      tailwindConfig.theme.extend.colors = {
+        ...tailwindConfig.theme.extend.colors,
+        ...colors
+      };
+    });
+    nuxt.options.appConfig.ui = _merge(ui, nuxt.options.appConfig.ui);
+    await installModule("@nuxt/ui");
+    await installModule("@pinia/nuxt");
+    await installModule("@vee-validate/nuxt", {
+      // disable or enable auto imports
+      autoImports: true,
+      // Use different names for components
+      componentNames: {
+        Form: "VForm",
+        Field: "VField",
+        FieldArray: "VFieldArray",
+        ErrorMessage: "VErrorMessage"
+      }
+    });
+    await installModule("nuxt-security", {
+      headers: {
+        xXSSProtection: "1; mode=block",
+        crossOriginEmbedderPolicy: "unsafe-none",
+        contentSecurityPolicy: {
+          "img-src": ["*", "'self'", "data:", "https"],
+          "script-src": [
+            "'self'",
+            "'unsafe-inline'",
+            "https://www.google-analytics.com",
+            "https://www.googletagmanager.com",
+            "https://fonts.googleapis.com",
+            "https://cdnjs.cloudflare.com"
+          ],
+          "script-src-attr": [
+            "'unsafe-inline'",
+            "https://www.google-analytics.com",
+            "https://www.googletagmanager.com",
+            "https://fonts.googleapis.com",
+            "https://cdnjs.cloudflare.com"
+          ]
+        }
+      }
+    });
     addPlugin({
       src: resolve(runtimeDir, "plugin")
     });
+    void addComponentsDir({
+      path: resolve(runtimeDir, "components"),
+      prefix: options.prefix,
+      global: options.global,
+      watch: false
+    });
     addImportsDir(resolve(runtimeDir, "composables"));
+    addImportsDir(resolve(runtimeDir, "utils"));
+    addImportsDir(resolve(runtimeDir, "types"));
   }
 });
 

package/dist/runtime/components/Button/Group.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <UButtonGroup v-bind="$attrs">
+      <Button label="Button" />
+      <Button color="blue" size="xs">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="h-3 w-3"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"
+          />
+        </svg>
+      </Button>
+    </UButtonGroup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: true,
+})
+</script>
+
+<style></style>

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

@@ -0,0 +1,17 @@
+<template>
+  <UButton v-bind="$attrs">
+    <template #leading>
+      <slot name="leading" />
+    </template>
+    <slot />
+
+    <template #trailing>
+      <slot name="trailing" />
+    </template>
+  </UButton>
+</template>
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: true,
+})
+</script>

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

@@ -0,0 +1,63 @@
+<template>
+  <Modal v-if="dialog.meta?.type" v-model="dialog.isShow" class="dialog" prevent-close>
+    <div :class="['flex items-center pt-8', { 'flex-col': !dialog.meta.isShowCancelBtn }]">
+      <div
+        :class="[
+          {
+            'text-warning': dialog.meta?.type === DialogType.WARNING,
+            'text-danger': dialog.meta?.type === DialogType.ERROR,
+            'text-info': dialog.meta?.type === DialogType.INFO,
+            'text-success': dialog.meta?.type === DialogType.SUCCESS,
+            'mr-4': dialog.meta.isShowCancelBtn,
+          },
+        ]"
+      >
+        <em v-if="dialog.meta?.type === 'success'" class="ic ic-check-circle-solid dialog-icon" />
+        <em v-if="dialog.meta?.type === 'info'" class="ic ic-info-circle-solid dialog-icon" />
+        <em
+          v-if="dialog.meta?.type === 'warning'"
+          class="ic ic-exclamation-triangle-solid dialog-icon"
+        />
+        <em v-if="dialog.meta?.type === 'error'" class="ic ic-x-circle-solid dialog-icon" />
+      </div>
+      <div :class="['flex w-full flex-col', { 'mt-4 text-center': !dialog.meta.isShowCancelBtn }]">
+        <h3 class="dialog-title">
+          {{ dialog.meta?.title }}
+        </h3>
+        <p class="dialog-message">
+          {{ dialog.meta?.message }}
+        </p>
+      </div>
+    </div>
+
+    <div :class="['mt-5 flex', dialog.meta.isShowCancelBtn ? 'justify-end' : 'justify-center ']">
+      <Button
+        v-if="dialog.meta?.isShowCancelBtn"
+        class="text-gray mr-4"
+        type="button"
+        @click="dialog.closeDialogCancel"
+      >
+        {{ dialog.meta?.cancelText || 'ยกเลิก' }}
+      </Button>
+      <Button
+        :class="[
+          {
+            'btn-success': dialog.meta?.type === DialogType.SUCCESS,
+            'btn-danger': dialog.meta?.type === DialogType.ERROR,
+            'btn-info': dialog.meta?.type === DialogType.INFO,
+            'btn-warning': dialog.meta?.type === DialogType.WARNING,
+            'mr-3': dialog.meta.isShowCancelBtn,
+          },
+        ]"
+        @click="dialog.closeDialogProceed"
+      >
+        {{ dialog.meta?.confirmText || 'ตกลง' }}
+      </Button>
+    </div>
+  </Modal>
+</template>
+<script lang="tsx" setup>
+import { DialogType, useDialog } from '#core/composables/useDialog'
+
+const dialog = useDialog()
+</script>

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

@@ -0,0 +1,10 @@
+<template>
+  <UFormGroup :label="label" :name="name" :error="errorMessage" :required="!!isRequired">
+    <slot />
+  </UFormGroup>
+</template>
+<script lang="ts" setup>
+import { type IFieldWrapperProps } from '#core/composables/useForm'
+
+defineProps<IFieldWrapperProps>()
+</script>

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

@@ -0,0 +1,41 @@
+<template>
+  <div class="fields">
+    <template v-for="(option, index) in options" :key="option.props.name + index + option.type">
+      <div v-if="!option.isHide" :class="option.class">
+        <FormInputStatic
+          v-if="option.type === INPUT_TYPES.STATIC"
+          :form="form"
+          v-bind="option.props"
+          v-on="option.on ?? {}"
+        />
+        <FormInputText
+          v-if="option.type === INPUT_TYPES.TEXT"
+          :form="form"
+          v-bind="option.props"
+          v-on="option.on ?? {}"
+        />
+        <FormInputToggle
+          v-if="option.type === INPUT_TYPES.TOGGLE"
+          :form="form"
+          v-bind="option.props"
+          v-on="option.on ?? {}"
+        />
+        <FormInputSelect
+          v-if="option.type === INPUT_TYPES.SELECT"
+          :form="form"
+          v-bind="option.props"
+          v-on="option.on ?? {}"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+<script lang="ts" setup>
+import { type FormContext } from 'vee-validate'
+import { type IFormField, INPUT_TYPES } from '#core/components/Form/types'
+
+defineProps<{
+  form?: FormContext
+  options: IFormField[]
+}>()
+</script>

package/dist/runtime/components/Form/InputSelect/SelectMenu.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <USelectMenu v-bind="$attrs" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: true,
+})
+</script>

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

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <USelect v-bind="$attrs" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: true,
+})
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps" :is-required="false">
+    <p class="form-control-static">
+      {{ !value || value.length === 0 ? '-' : value }}
+    </p>
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import { type IStaticFieldProps } from '#core/components/Form/InputStatic/types'
+import { useFieldHOC } from '#core/composables/useForm'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+
+const props = withDefaults(defineProps<IStaticFieldProps>(), {})
+
+const { value, label, wrapperProps, disabled } = useFieldHOC<string>(props)
+</script>

package/dist/runtime/components/Form/InputStatic/types.d.ts

@@ -0,0 +1,4 @@
+import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
+export interface IStaticFieldProps extends IFieldProps {
+}
+export type IStaticField = IFormFieldBase<INPUT_TYPES.STATIC, IStaticFieldProps>;

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

@@ -0,0 +1,28 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <UInput
+      v-model="value"
+      :disabled="disabled"
+      :name="name"
+      :placeholder="placeholder ?? props.label"
+      :type="isShowPassword ? 'text' : props.type || 'text'"
+      :autofocus="!!autoFocus"
+    />
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import { ref } from '#imports'
+import { type ITextFieldProps } from '#core/components/Form/InputText/types'
+import { useFieldHOC } from '#core/composables/useForm'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+
+const props = withDefaults(defineProps<ITextFieldProps>(), {})
+const emits = defineEmits<{
+  (event: 'change', value: string): void
+  (event: 'blur', value: string): void
+}>()
+
+const { value, wrapperProps, disabled, handleChange } = useFieldHOC<string>(props)
+
+const isShowPassword = ref(false)
+</script>

package/dist/runtime/components/Form/InputText/types.d.ts

@@ -0,0 +1,10 @@
+import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
+export interface ITextFieldProps extends IFieldProps {
+    type?: 'text' | 'password' | 'email';
+    prependIcon?: any;
+    appendIcon?: any;
+}
+export type ITextField = IFormFieldBase<INPUT_TYPES.TEXT | INPUT_TYPES.PASSWORD, ITextFieldProps, {
+    change?: (value: string) => void;
+    blur?: (value: string) => void;
+}>;

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

@@ -0,0 +1,14 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <UToggle v-model="value" :disabled="disabled" :name="name" />
+  </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import { useFieldHOC } from '#core/composables/useForm'
+import { type IToggleFieldProps } from '#core/components/Form/InputToggle/types'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+
+const props = withDefaults(defineProps<IToggleFieldProps>(), {})
+const { value, wrapperProps, disabled, handleChange } = useFieldHOC<boolean>(props)
+</script>

package/dist/runtime/components/Form/InputToggle/types.d.ts

@@ -0,0 +1,6 @@
+import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
+export interface IToggleFieldProps extends IFieldProps {
+}
+export type IToggleField = IFormFieldBase<INPUT_TYPES.TOGGLE, IToggleFieldProps, {
+    change?: (value: string) => void;
+}>;

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

@@ -0,0 +1,6 @@
+<template>
+  <form class="form">
+    <slot />
+  </form>
+</template>
+<script lang="ts" setup></script>