create-nuxt-base 0.1.23 → 0.2.1

package/nuxt-base-template/package.json

@@ -5,10 +5,15 @@
     "init": "npm install",
     "reinit": "rm -rf node_modules && rm -rf package-lock.json && yes | npx nuxt cleanup && npm cache clean --force && npm i",
     "build": "nuxt build",
-    "build:test": "API_URL=123 nuxt build",
+    "build:develop": "npm run build",
+    "build:test": "npm run build",
     "start": "nuxt dev",
-    "start:test": "API_URL=123 node .output/server/index.mjs",
-    "generate-types": "GENERATE_TYPES=1 nuxt dev",
+    "start:develop": "node .output/server/index.mjs",
+    "start:test": "node .output/server/index.mjs",
+    "start:prod": "node .output/server/index.mjs",
+    "start:tunnel": "nuxt dev --tunnel",
+    "start:extern": "HOST=0.0.0.0 nuxt dev",
+    "generate-types": "rm -rf ./src/base && GENERATE_TYPES=1 nuxt dev",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
@@ -20,40 +25,53 @@
     "postbuild": "cd .output/server/node_modules/tslib; npm pkg set 'exports[.].import.node'='./tslib.es6.mjs'"
   },
   "dependencies": {
-    "@egoist/tailwindcss-icons": "1.2.0",
-    "@formkit/icons": "1.1.0",
-    "@formkit/nuxt": "1.1.0",
-    "@iconify-json/bi": "1.1.20",
-    "@lenne.tech/nuxt-base": "latest",
-    "@vueuse/core": "10.4.1",
-    "@vueuse/integrations": "10.4.1",
-    "@vueuse/nuxt": "10.4.1",
-    "pinia": "2.1.6",
-    "tailwind-merge": "1.14.0"
+    "@egoist/tailwindcss-icons": "1.7.4",
+    "@iconify-json/bi": "1.1.23",
+    "@lenne.tech/nuxt-base": "3.4.0",
+    "@nuxt/image": "1.3.0",
+    "@vee-validate/yup": "4.12.5",
+    "@vueuse/core": "10.7.2",
+    "@vueuse/integrations": "10.7.2",
+    "@vueuse/nuxt": "10.7.2",
+    "ios-pwa-splash": "1.0.0",
+    "pinia": "2.1.7",
+    "tailwind-merge": "2.2.1",
+    "vee-validate": "4.12.5"
   },
   "devDependencies": {
-    "@kevinmarrec/nuxt-pwa": "0.17.0",
-    "@lenne.tech/eslint-config-vue": "0.0.10",
-    "@nuxt/devtools": "0.8.5",
-    "@nuxt/test-utils": "3.7.4",
-    "@nuxtjs/color-mode": "3.3.0",
-    "@nuxtjs/google-fonts": "3.0.2",
-    "@nuxtjs/tailwindcss": "6.8.0",
-    "@tailwindcss/forms": "0.5.6",
+    "@lenne.tech/eslint-config-vue": "0.0.16",
+    "@nuxt/devtools": "1.0.8",
+    "@nuxt/test-utils": "3.11.0",
+    "@nuxtjs/color-mode": "3.3.2",
+    "@nuxtjs/google-fonts": "3.1.3",
+    "@nuxtjs/plausible": "0.2.4",
+    "@nuxtjs/sitemap": "5.1.0",
+    "@nuxtjs/tailwindcss": "6.11.2",
+    "@playwright/test": "1.41.2",
+    "@tailwindcss/forms": "0.5.7",
     "@tailwindcss/typography": "0.5.10",
-    "@vitejs/plugin-vue": "4.3.4",
-    "@vue/test-utils": "2.4.1",
-    "eslint": "8.50.0",
-    "jsdom": "22.1.0",
-    "nuxt": "3.7.4",
-    "ts-loader": "9.4.4",
-    "typescript": "5.2.2",
-    "vitest": "0.34.2"
+    "@types/node": "20.11.16",
+    "@vitejs/plugin-vue": "5.0.3",
+    "@vue/test-utils": "2.4.4",
+    "eslint": "8.56.0",
+    "jsdom": "24.0.0",
+    "nuxt": "3.10.0",
+    "nuxt-simple-robots": "4.0.0-rc.14",
+    "ts-loader": "9.5.1",
+    "typescript": "5.3.3",
+    "vitest": "1.2.2"
   },
   "overrides": {
     "vue": "latest",
     "@nuxt/test-utils": {
       "vitest": "$vitest"
     }
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "node": "./tslib.es6.mjs"
+      }
+    }
   }
 }

package/nuxt-base-template/playwright.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './e2e',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

package/nuxt-base-template/src/app.vue

@@ -1,8 +1,8 @@
 <template>
   <NuxtLayout>
-    <BaseModalContainer />
-    <BaseNotificationContainer />
-    <NuxtLoadingIndicator />
+    <ModalContainer />
+    <NotificationContainer />
+    <BaseContextMenuContainer />
     <NuxtPage />
   </NuxtLayout>
-</template>
+</template>

package/nuxt-base-template/src/assets/css/tailwind.css

@@ -1,40 +1,49 @@
 @tailwind base;
 
 @layer base {
-    body {
-        @apply transition-colors duration-300;
-    }
-    h1 {
-        @apply text-[32px] leading-[140%] lg:text-[66px] lg:leading-[140%] font-bold;
-    }
-    h2 {
-        @apply text-[28px] leading-[140%] lg:text-[51px] lg:leading-[140%] font-semibold;
-    }
-    h3 {
-        @apply text-[21px] leading-[140%] lg:text-[39px] lg:leading-[140%] font-bold;
-    }
-    h4 {
-        @apply text-[18px] leading-[140%] lg:text-[30px] lg:leading-[140%] font-bold;
-    }
-    h5 {
-        @apply text-[15px] leading-[140%] lg:text-[23px] lg:leading-[140%] font-bold;
-    }
-    h6 {
-        @apply text-[16px] leading-[140%] lg:text-[18px] lg:leading-[140%] font-bold;
-    }
-    p {
-        @apply text-[15px] leading-[140%] lg:text-[18px] lg:leading-[140%];
-    }
-    small {
-        @apply text-[14px] leading-[140%] lg:text-[16px] lg:leading-[140%];
-    }
-    a {
-        @apply text-[15px] leading-[140%] lg:text-[18px] lg:leading-[140%];
-    }
-    button {
-        @apply text-[15px] leading-[140%] lg:text-[18px] lg:leading-[140%] font-semibold;
-    }
+  body {
+    @apply transition-colors duration-300;
+  }
+  h1 {
+    @apply text-[32px] leading-[140%] lg:text-[66px] lg:leading-[140%] font-bold;
+  }
+  h2 {
+    @apply text-[28px] leading-[140%] lg:text-[51px] lg:leading-[140%] font-semibold;
+  }
+  h3 {
+    @apply text-[21px] leading-[140%] lg:text-[39px] lg:leading-[140%] font-bold;
+  }
+  h4 {
+    @apply text-[18px] leading-[140%] lg:text-[30px] lg:leading-[140%] font-bold;
+  }
+  h5 {
+    @apply text-[15px] leading-[140%] lg:text-[23px] lg:leading-[140%] font-bold;
+  }
+  h6 {
+    @apply text-[16px] leading-[140%] lg:text-[18px] lg:leading-[140%] font-bold;
+  }
+  p {
+    @apply text-[15px] leading-[140%] lg:text-[18px] lg:leading-[140%];
+  }
+  small {
+    @apply text-[14px] leading-[140%] lg:text-[16px] lg:leading-[140%];
+  }
+  a {
+    @apply text-[15px] leading-[140%] lg:text-[18px] lg:leading-[140%];
+  }
+  button {
+    @apply text-[15px] leading-[140%] lg:text-[18px] lg:leading-[140%];
+  }
 }
 
 @tailwind components;
 @tailwind utilities;
+
+html,
+body {
+  height: 100%;
+}
+
+#__nuxt {
+  height: 100%;
+}

package/nuxt-base-template/src/components/SocialMediaBubble.vue

@@ -13,4 +13,4 @@ const props = defineProps<{
     </span>
     <small class="text-sm font-light mt-2">{{ title }}</small>
   </button>
-</template>
+</template>

package/nuxt-base-template/src/components/base/BaseAccordion.vue

@@ -2,19 +2,25 @@
 import { computed, ref } from 'vue';
 import { useElementSize } from '@vueuse/core';
 
-const props = withDefaults(defineProps<{
-  expanded?: boolean;
-}>(), {
-  expanded: false,
-});
+const props = withDefaults(
+  defineProps<{
+    expanded?: boolean;
+  }>(),
+  {
+    expanded: false,
+  }
+);
 
 const show = ref(false);
 const contents = ref<HTMLElement>();
 
-watch(() => props.expanded, () => {
-  show.value = props.expanded;
-}, { immediate: true });
-
+watch(
+  () => props.expanded,
+  () => {
+    show.value = props.expanded;
+  },
+  { immediate: true }
+);
 
 const { height: targetHeight } = useElementSize(contents, undefined, {
   box: 'border-box',
@@ -31,10 +37,7 @@ const height = computed(() => (show.value ? targetHeight.value : 0));
       </div>
 
       <div class="relative ml-auto flex items-center justify-center">
-        <span
-          :class="{ 'rotate-180': show, 'rotate-45': !show }"
-          class="i-bi-x h-5 w-5 text-gray-900 transition-transform duration-500 md:h-6 md:w-6 dark:bg-white"
-        ></span>
+        <span :class="{ 'rotate-180': show, 'rotate-45': !show }" class="i-bi-x h-5 w-5 text-gray-900 transition-transform duration-500 md:h-6 md:w-6 dark:bg-white"></span>
       </div>
     </div>
 

package/nuxt-base-template/src/components/base/BaseButton.vue

@@ -8,9 +8,9 @@ const props = withDefaults(
     href?: string;
     to?: RouteLocationRaw;
     appearance?: 'regular' | 'outline' | 'none';
-    size?: 'sm' | 'md' | 'lg' | 'auto' | 'calendar';
-    color?: 'primary' | 'secondary' | 'green' | 'yellow' | 'lightgrey' | 'lightprimary' | 'danger';
-    textColor?: 'white' | 'black' | 'primary' | 'fullblack' | 'gray' | '';
+    size?: 'sm' | 'md' | 'lg' | 'auto';
+    color?: 'primary' | 'secondary' | 'green' | 'yellow' | 'lightprimary' | 'danger';
+    textColor?: 'white' | 'black' | 'primary' | 'gray' | '';
     type?: 'submit' | 'button';
     loading?: boolean;
     loadingText?: string;
@@ -25,20 +25,19 @@ const props = withDefaults(
     loading: false,
     loadingText: 'Loading',
     block: false,
-  },
+  }
 );
 
 const appearanceClasses: Record<typeof props.appearance, string> = {
-  regular: 'rounded-full text-white',
+  regular: 'rounded-md text-white',
   outline:
-    'rounded-full border border-primary bg-white hover:bg-primary-500 text-primary hover:text-white disabled:bg-transparent disabled:text-gray-400 disabled:border-gray-200',
-  none: 'bg-transparent border-transparent hover:text-primary-500 text-black hover:bg-transparent',
+    'rounded-md border border-primary bg-background hover:bg-primary-500 text-primary hover:text-white disabled:bg-transparent disabled:text-gray-400 disabled:border-gray-200',
+  none: 'bg-transparent border-transparent hover:text-primary-500 text-foreground hover:bg-transparent',
 };
 
 const sizeClasses: Record<typeof props.size, string> = {
-  sm: 'min-w-[110px] py-1.5 px-4 text-sm',
-  calendar: 'min-w-[23%] py-1.5 px-5 text-base',
-  md: 'min-w-[200px] py-2 px-3 text-base',
+  sm: 'min-w-[100px] py-1.5 px-1.5 text-sm',
+  md: 'min-w-[100px] py-1.5 px-2 text-base',
   lg: 'min-w-[240px] py-3 px-4 text-lg',
   auto: 'text-sm lg:text-lg',
 };
@@ -49,14 +48,12 @@ const colorClasses: Record<typeof props.color, string> = {
   green: 'bg-green-500 hover:bg-green-400 text-green-50',
   yellow: 'bg-yellow-500 hover:bg-yellow-400 text-yellow-950',
   danger: 'bg-red-500 hover:bg-red-400 text-red-950',
-  lightgrey: 'bg-slate-100 text-slate-200',
   lightprimary: 'bg-primary-300 text-primary-50',
 };
 
 const textColorClasses: Record<typeof props.textColor, string> = {
   white: 'text-white',
-  black: 'text-black dark:text-white',
-  fullblack: 'text-black dark:text-black',
+  black: 'text-black',
   primary: 'text-primary',
   gray: 'text-gray-400',
   '': '',

package/nuxt-base-template/src/components/base/BaseContainer.vue

@@ -2,4 +2,4 @@
   <div class="w-full px-4 max-w-7xl mx-auto">
     <slot></slot>
   </div>
-</template>
+</template>

package/nuxt-base-template/src/components/base/BaseContextMenuContainer.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { useMouse } from '@vueuse/core';
+
+import { useContextMenu } from '~/composables/use-context-menu';
+
+const { activeMenu, close } = useContextMenu();
+const target = ref();
+const isLeft = usePageLeave();
+
+onClickOutside(target, () => close());
+
+const { x, y } = useMouse();
+const left = ref(0);
+const top = ref(0);
+
+watch(
+  () => isLeft.value,
+  () => {
+    close();
+  }
+);
+
+watch(
+  () => activeMenu.value,
+  () => {
+    if (activeMenu.value?.show) {
+      left.value = unref(x.value);
+      top.value = unref(y.value);
+    }
+  }
+);
+</script>
+
+<template>
+  <ClientOnly>
+    <Teleport to="body">
+      <TransitionFade leave-duration="150" start-duration="150">
+        <div
+          v-show="activeMenu"
+          @mouseleave="close()"
+          ref="target"
+          class="absolute w-56 right-0 origin-top-right border border-border bg-background overflow-hidden shadow-lg rounded-md focus:outline-none"
+          :style="`top: ${top}px; left: ${left}px`"
+        >
+          <button
+            v-for="item of activeMenu?.items"
+            :key="item"
+            type="button"
+            class="w-full text-left text-foreground px-4 py-2 text-sm hover:bg-hover hover:text-foreground flex justify-between items-center"
+            @click="
+              item.click();
+              close();
+            "
+          >
+            {{ item.label }}
+          </button>
+        </div>
+      </TransitionFade>
+    </Teleport>
+  </ClientOnly>
+</template>

package/nuxt-base-template/src/components/base/BaseInfinityList.vue

@@ -31,4 +31,4 @@ onUnmounted(() => {
   <div ref="scrollContainer">
     <slot></slot>
   </div>
-</template>
+</template>

package/nuxt-base-template/src/components/base/BaseProgressbar.vue

@@ -1,39 +1,42 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{
-  percent: number | `${number}`;
-  duration?: number | `${number}`;
-  label?: string;
-  color?: 'primary' | 'red' | 'green' | 'blue';
-}>(), {
-  duration: 400,
-  color: 'primary',
-});
+const props = withDefaults(
+  defineProps<{
+    percent: number | `${number}`;
+    duration?: number | `${number}`;
+    label?: string;
+    color?: 'primary' | 'red' | 'green' | 'blue';
+  }>(),
+  {
+    duration: 400,
+    color: 'primary',
+  }
+);
 
 type RecordFromUnion<T extends string> = {
-  [K in T]: string
+  [K in T]: string;
 };
 
 type ColorTypes = 'text' | 'background' | 'background-light';
 
 const colorClass: Record<typeof props.color, RecordFromUnion<ColorTypes>> = {
-  'primary': {
-    'text': 'text-primary-600',
-    'background': 'bg-primary-500',
+  primary: {
+    text: 'text-primary-600',
+    background: 'bg-primary-500',
     'background-light': 'bg-gray-200',
   },
-  'red': {
-    'text': 'text-red-600',
-    'background': 'bg-red-500',
+  red: {
+    text: 'text-red-600',
+    background: 'bg-red-500',
     'background-light': 'bg-red-200',
   },
-  'green': {
-    'text': 'text-green-600',
-    'background': 'bg-green-500',
+  green: {
+    text: 'text-green-600',
+    background: 'bg-green-500',
     'background-light': 'bg-green-200',
   },
-  'blue': {
-    'text': 'text-blue-600',
-    'background': 'bg-blue-500',
+  blue: {
+    text: 'text-blue-600',
+    background: 'bg-blue-500',
     'background-light': 'bg-blue-200',
   },
 };
@@ -43,17 +46,12 @@ const colorClass: Record<typeof props.color, RecordFromUnion<ColorTypes>> = {
   <div :style="`--percent: ${props.percent}%; --duration: ${props.duration}ms;`" class="relative pt-1 w-full">
     <div v-if="props.label" class="flex mb-2 items-center justify-between">
       <div>
-        <span
-          :class="[colorClass[props.color].text, colorClass[props.color]['background-light']]"
-          class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full"
-        >
+        <span :class="[colorClass[props.color].text, colorClass[props.color]['background-light']]" class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full">
           {{ props.label }}
         </span>
       </div>
       <div class="text-right">
-        <span :class="[colorClass[props.color].text]" class="text-xs font-semibold inline-block ">
-          {{ (+props.percent).toFixed(0) }}%
-        </span>
+        <span :class="[colorClass[props.color].text]" class="text-xs font-semibold inline-block"> {{ (+props.percent).toFixed(0) }}% </span>
       </div>
     </div>
     <div :class="colorClass[props.color]['background-light']" class="overflow-hidden h-1 mb-4 text-xs flex rounded bg-[--color-light]">
@@ -63,4 +61,4 @@ const colorClass: Record<typeof props.color, RecordFromUnion<ColorTypes>> = {
       ></div>
     </div>
   </div>
-</template>
+</template>

package/nuxt-base-template/src/components/base/BaseToggle.vue

@@ -1,20 +1,27 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{
-  active?: boolean;
-}>(), {
-  active: false,
-});
+const props = withDefaults(
+  defineProps<{
+    active?: boolean;
+  }>(),
+  {
+    active: false,
+  }
+);
 const toggleActive = ref(false);
 
-watch(() => props.active, () => {
-  toggleActive.value = props.active;
-}, { immediate: true });
+watch(
+  () => props.active,
+  () => {
+    toggleActive.value = props.active;
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
-  <div class="flex justify-between items-center" @click="toggleActive = !toggleActive">
+  <div class="flex justify-between items-center cursor-pointer" @click="toggleActive = !toggleActive">
     <div class="w-8 h-5 flex items-center bg-gray-300 rounded-full p-1 duration-300 ease-in-out" :class="{ 'bg-green-400': toggleActive }">
       <div class="bg-white w-4 h-4 rounded-full shadow-md transform duration-300 ease-in-out" :class="{ 'translate-x-2': toggleActive }"></div>
     </div>
   </div>
-</template>
+</template>

package/nuxt-base-template/src/components/form/FormInput.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ErrorMessage, useField } from 'vee-validate';
+
+const props = defineProps<{
+  disabled?: boolean;
+  label?: string;
+  name: string;
+  placeholder?: string;
+  type: string;
+}>();
+
+const { handleBlur, handleChange, value, meta, setTouched } = useField(() => props.name);
+</script>
+
+<template>
+  <div class="mt-3">
+    <label v-if="label" :for="name" class="block text-sm font-medium leading-6 text-foreground">{{ label }}{{ meta.required ? '*' : '' }}</label>
+    <div class="relative mt-2 pb-2">
+      <input
+        :id="name"
+        :type="type"
+        :name="name"
+        v-model="value"
+        :disabled="disabled"
+        @blur="handleBlur"
+        @focus="setTouched(true)"
+        @change="handleChange"
+        class="bg-background block w-full rounded-md border-0 py-1.5 text-foreground shadow-sm ring-1 ring-inset ring-border placeholder:text-foreground/50 focus:ring-1 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
+        :placeholder="placeholder"
+      />
+      <ErrorMessage class="absolute -bottom-2.5 text-xs font-light text-red-600" :name="name" />
+    </div>
+  </div>
+</template>