ci/cd: changed project structure and add build config

Author: RiadhAdrani

.github/workflows/actions.yml

@@ -20,19 +20,19 @@ jobs:
  cache: "yarn"
  - run: yarn install --frozen-lockfile
  - run: yarn test
- build-and-deploy:
- concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession.
- runs-on: ubuntu-latest
- steps:
- - name: Checkout 🛎️
- uses: actions/checkout@v3
+ # build-and-deploy:
+ #  concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession.
+ #  runs-on: ubuntu-latest
+ #  steps:
+ #  - name: Checkout 🛎️
+ #  uses: actions/checkout@v3
 
- - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
- run: |
- yarn install --frozen-lockfile
- yarn build
- - name: Deploy 🚀
- uses: JamesIves/github-pages-deploy-action@v4
- with:
- folder: dist # The folder the action should deploy.
- branch: gh-pages
+ #  - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
+ #  run: |
+ #  yarn install --frozen-lockfile
+ #  yarn build
+ #  - name: Deploy 🚀
+ #  uses: JamesIves/github-pages-deploy-action@v4
+ #  with:
+ #  folder: dist # The folder the action should deploy.
+ #  branch: gh-pages

package.json

@@ -1,8 +1,21 @@
 {
- "name": "custom-layout-vue",
- "private": true,
- "version": "0.0.0",
+ "name": "@riadh-adrani/custom-layout-vue",
+ "private": false,
+ "version": "0.0.1",
  "type": "module",
+ "types": "./dist/index.d.ts",
+ "files": [
+ "dist"
+ ],
+ "main": "./dist/clv-umd.js",
+ "module": "./dist/clv-es.js",
+ "exports": {
+ ".": {
+ "import": "./dist/clv-es.js",
+ "require": "./dist/clv-umd.js"
+ },
+ "./dist/style.css": "./dist/style.css"
+ },
  "scripts": {
  "dev": "vite",
  "build": "vue-tsc && vite build",
@@ -19,6 +32,7 @@
  "@vitejs/plugin-vue": "^4.0.0",
  "typescript": "^4.9.3",
  "vite": "^4.1.0",
+ "vite-plugin-dts": "^1.7.3",
  "vitest": "^0.28.4",
  "vue-tsc": "^1.0.24"
  }

src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Direction } from "./lib/types";
-import { VLayout, useLayout, layout as createLayout, tab as createTab } from "./lib";
+import { Direction } from "./components/types";
+import { VLayout, useLayout, layout as createLayout, tab as createTab } from "./components";
 
 const { options } = useLayout(
  createLayout({

src/lib/VDropZone.vue renamed to src/components/VDropZone.vue

@@ -254,8 +254,8 @@ onBeforeUnmount(() => {
  @toggle-tab="toggle(item.id)"
  @close-tab="close(item.id)"
  >
- <template #default="props">
- <slot name="tab-btn" v-bind="props" />
+ <template #default="props: TabButtonSlotProps">
+ <slot name="tab-btn" v-bind="(props as TabButtonSlotProps)" />
  </template>
  </VTabButton>
  </div>
@@ -264,7 +264,7 @@ onBeforeUnmount(() => {
  <VTabContent @on-drop="drop">
  <slot
  name="tab"
- v-bind="getTab(options.tree.active!,(options.tree.children as Array<Tab>))"
+ v-bind="(getTab(options.tree.active!,(options.tree.children as Array<Tab>)) as Tab)"
  />
  </VTabContent>
  </div>
@@ -274,10 +274,10 @@ onBeforeUnmount(() => {
  :key="item.id"
  :options="{ tree: item, actions: options.actions }"
  >
- <template #tab="data">
+ <template #tab="data: Tab">
  <slot name="tab" v-bind="(data as Tab)" />
  </template>
- <template #tab-btn="props">
+ <template #tab-btn="props: TabButtonSlotProps">
  <slot name="tab-btn" v-bind="(props as TabButtonSlotProps)" />
  </template>
  </VLayout>

src/lib/VLayout.vue renamed to src/components/VLayout.vue

@@ -0,0 +1,18 @@
+import { App } from "vue";
+import VLayout from "./VLayout.vue";
+import VDropZone from "./VDropZone.vue";
+import VTabButton from "./VTabButton.vue";
+import VTabContent from "./VTabContent.vue";
+
+export * from "./types";
+export { default as useLayout, createTab as tab, createLayout as layout } from "./useLayout";
+export { VLayout };
+
+export const CLV = {
+ install(vue: App) {
+ vue.component("VDropZone", VDropZone);
+ vue.component("VTabButton", VTabButton);
+ vue.component("VTabContent", VTabContent);
+ vue.component("VLayout", VLayout);
+ },
+};