@naptics/vue-collection 0.2.14 → 0.3.0

package/.github/workflows/build.yml

@@ -0,0 +1,26 @@
+name: Lint, Type-Check, Build & Test
+
+on: 
+  push: 
+    branches: 
+      - '**' 
+
+jobs:
+  build:
+    name: Lint, Type-Check, Build & Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Read .nvmrc
+        run: echo "NVMRC=$(cat .nvmrc)" >> $GITHUB_OUTPUT
+        id: nvm
+      - name: Setup node environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ steps.nvm.outputs.NVMRC }}
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run build-lib
+      - run: npm run build-demo
+      - run: npm run test

package/.github/workflows/deploy-demo.yml

@@ -0,0 +1,46 @@
+name: Deploy Demo App to Github Pages
+
+on:
+  push:
+    branches: 
+      - main
+    
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+env:
+  VITE_BASE_PATH: vue-collection/
+
+jobs:
+  build:
+    name: Lint, Type-Check, Build & Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Read .nvmrc
+        run: echo "NVMRC=$(cat .nvmrc)" >> $GITHUB_OUTPUT
+        id: nvm
+      - name: Setup node environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ steps.nvm.outputs.NVMRC }}
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run build-demo
+      - run: npm run test
+      - name: Upload demo as artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: 'dist'
+  deploy:
+    name: Deploy Demo App To Github Pages
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        uses: actions/deploy-pages@v4

package/.github/workflows/deploy-lib.yml

@@ -0,0 +1,65 @@
+name: Deploy Library to npm
+
+on:
+  push:
+    tags:
+      - v*
+
+jobs:
+  build:
+    name: Lint, Type-Check, Build & Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Read .nvmrc
+        run: echo "NVMRC=$(cat .nvmrc)" >> $GITHUB_OUTPUT
+        id: nvm
+      - name: Setup node environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ steps.nvm.outputs.NVMRC }}
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run build-lib
+      - run: npm run test
+      - name: Upload library as artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: vue-collection-lib
+          path: |
+            lib
+            .npmrc
+            package.json
+            README.md
+  deploy:
+    name: Deploy Library to npm
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write  # Required for OIDC
+      contents: read
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Read .nvmrc
+        run: echo "NVMRC=$(cat .nvmrc)" >> $GITHUB_OUTPUT
+        id: nvm
+      - name: Setup node environment
+        uses: actions/setup-node@v4
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+        with:
+          node-version: ${{ steps.nvm.outputs.NVMRC }}
+          registry-url: https://registry.npmjs.org/
+      # Ensure npm 11.5.1 or later for trusted publishing
+      - name: Ensure latest npm version
+        run: npm --version
+      - run: npm install -g npm@latest --no-man
+      - name: Download library artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: vue-collection-lib
+      - name: Prepare folder structure
+        run: mv ./lib/* .
+      - run: npm publish --access=public

package/.gitlab-ci.yml

@@ -0,0 +1,57 @@
+cache:
+    paths:
+        - node_modules/
+
+default: 
+    image: node:18-alpine3.15
+
+stages: 
+    - prebuild
+    - build
+    - deploy
+
+workflow: 
+    rules: 
+        - if: $CI_PIPELINE_SOURCE == "merge_request_event"
+        - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
+
+prebuild: 
+    stage: prebuild
+    before_script:
+        - npm ci
+    script: 
+        - npm run type-check
+        - npm run lint
+        - npm run test
+
+
+build-pages: 
+    stage: build
+    before_script: 
+        - npm ci
+    script: 
+        - export VITE_BASE_PATH="${CI_PROJECT_PATH#$CI_PROJECT_ROOT_NAMESPACE}/"
+        - npm run build
+    artifacts:
+        paths:
+            - dist/
+        expire_in: 1 day
+
+pages:
+    stage: deploy
+    image: busybox:latest
+    environment:
+        name: Showroom
+        url: $CI_PAGES_URL
+    script: 
+        - rm -rf public
+        - mkdir public
+        - mv dist/* public
+    artifacts: 
+        paths: 
+            - public
+    rules: 
+        - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
+
+
+    

package/.nvmrc

@@ -0,0 +1 @@
+24

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": false,
+    "singleQuote": true,
+    "printWidth": 120,
+    "arrowParens": "avoid"
+}

package/.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "Vue.vscode-typescript-vue-plugin",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss"
+  ],
+  "unwantedRecommendations": ["octref.vetur"]
+}

package/.vscode/launch.json

@@ -0,0 +1,23 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome Canary",
+            "url": "http://localhost:5173",
+            "webRoot": "${workspaceFolder}",
+            "runtimeExecutable": "canary"
+        },
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome (stable)",
+            "url": "http://localhost:5173",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

package/.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+    "eslint.enable": true,
+    "prettier.enable": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "eslint.validate": ["vue", "html", "javascript", "typescript", "javascriptreact", "typescriptreact"],
+    "css.lint.unknownAtRules": "ignore",
+    "[yaml]": {
+        "editor.insertSpaces": true,
+        "editor.tabSize": 2,
+        "editor.autoIndent": "advanced"
+    }
+}

package/babel.config.json

@@ -0,0 +1,3 @@
+{
+    "plugins": ["@vue/babel-plugin-jsx"]
+}

package/components/NAlert.d.ts

@@ -25,48 +25,5 @@ export declare const nAlertProps: {
  * The `NAlert` is a fully styled alert with multiple variants.
  * It can be used as a normal blocking element or as part of an alert queue.
  */
-declare const Component: import("vue").DefineComponent<{
-    /**
-     * The variant of the alert. This defines its color and icon.
-     */
-    readonly variant: {
-        readonly type: PropType<AlertVariant>;
-        readonly default: "success";
-    };
-    /**
-     * The text of the alert.
-     */
-    readonly text: StringConstructor;
-    /**
-     * If set to `true` the X-button of the alert is hidden.
-     */
-    readonly hideX: BooleanConstructor;
-    /**
-     * This is called, when the X-button is clicked.
-     */
-    readonly onDismiss: PropType<() => void>;
-}, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * The variant of the alert. This defines its color and icon.
-     */
-    readonly variant: {
-        readonly type: PropType<AlertVariant>;
-        readonly default: "success";
-    };
-    /**
-     * The text of the alert.
-     */
-    readonly text: StringConstructor;
-    /**
-     * If set to `true` the X-button of the alert is hidden.
-     */
-    readonly hideX: BooleanConstructor;
-    /**
-     * This is called, when the X-button is clicked.
-     */
-    readonly onDismiss: PropType<() => void>;
-}>> & {}, {
-    readonly variant: AlertVariant;
-    readonly hideX: boolean;
-}>;
+declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 export { Component as NAlert, Component as default };

package/components/NBadge.d.ts

@@ -65,137 +65,5 @@ export declare const nBadgeProps: {
 /**
  * The `NBadge` is a styled element to wrap a text.
  */
-declare const Component: import("vue").DefineComponent<{
-    readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => JSX.Element>;
-    readonly tooltipHide: BooleanConstructor;
-    readonly tooltipShow: BooleanConstructor;
-    readonly tooltipPlacement: {
-        readonly type: PropType<import("./NTooltip").TooltipPlacement>;
-        readonly default: "auto";
-    };
-    readonly tooltipMaxWidth: {
-        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
-        readonly default: "max-w-xs";
-    };
-    readonly tooltipWrapperClass: StringConstructor;
-    readonly tooltipContentClass: StringConstructor;
-    readonly tooltipArrowClass: StringConstructor;
-    /**
-     * The text of the badge. Can alternatively be passed in the default slot.
-     */
-    readonly text: StringConstructor;
-    /**
-     * The text size, a standard tailwind text-size class.
-     */
-    readonly textSize: {
-        readonly type: PropType<TWTextSize>;
-        readonly default: "text-sm";
-    };
-    /**
-     * The color of the badge.
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    /**
-     * The background shade of the badge.
-     */
-    readonly shade: {
-        readonly type: NumberConstructor;
-        readonly default: 200;
-    };
-    /**
-     * The text shade of the badge.
-     */
-    readonly textShade: {
-        readonly type: NumberConstructor;
-        readonly default: 900;
-    };
-    /**
-     * If set to `true` the badges text is all-caps. Default is `true`.
-     */
-    readonly allCaps: {
-        readonly type: BooleanConstructor;
-        readonly default: true;
-    };
-    /**
-     * Adds the classes to the badge.
-     * Use this instead of `class` to style the button, because the button is wrapped inside
-     * a div for the tooltip and `class` would be applied to the wrapping div.
-     */
-    readonly badgeClass: StringConstructor;
-}, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => JSX.Element>;
-    readonly tooltipHide: BooleanConstructor;
-    readonly tooltipShow: BooleanConstructor;
-    readonly tooltipPlacement: {
-        readonly type: PropType<import("./NTooltip").TooltipPlacement>;
-        readonly default: "auto";
-    };
-    readonly tooltipMaxWidth: {
-        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
-        readonly default: "max-w-xs";
-    };
-    readonly tooltipWrapperClass: StringConstructor;
-    readonly tooltipContentClass: StringConstructor;
-    readonly tooltipArrowClass: StringConstructor;
-    /**
-     * The text of the badge. Can alternatively be passed in the default slot.
-     */
-    readonly text: StringConstructor;
-    /**
-     * The text size, a standard tailwind text-size class.
-     */
-    readonly textSize: {
-        readonly type: PropType<TWTextSize>;
-        readonly default: "text-sm";
-    };
-    /**
-     * The color of the badge.
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    /**
-     * The background shade of the badge.
-     */
-    readonly shade: {
-        readonly type: NumberConstructor;
-        readonly default: 200;
-    };
-    /**
-     * The text shade of the badge.
-     */
-    readonly textShade: {
-        readonly type: NumberConstructor;
-        readonly default: 900;
-    };
-    /**
-     * If set to `true` the badges text is all-caps. Default is `true`.
-     */
-    readonly allCaps: {
-        readonly type: BooleanConstructor;
-        readonly default: true;
-    };
-    /**
-     * Adds the classes to the badge.
-     * Use this instead of `class` to style the button, because the button is wrapped inside
-     * a div for the tooltip and `class` would be applied to the wrapping div.
-     */
-    readonly badgeClass: StringConstructor;
-}>> & {}, {
-    readonly color: string;
-    readonly shade: number;
-    readonly tooltipHide: boolean;
-    readonly tooltipShow: boolean;
-    readonly tooltipPlacement: import("./NTooltip").TooltipPlacement;
-    readonly tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
-    readonly textSize: TWTextSize;
-    readonly textShade: number;
-    readonly allCaps: boolean;
-}>;
+declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 export { Component as NBadge, Component as default };

package/components/NBreadcrub.d.ts

@@ -29,7 +29,7 @@ export declare const nBreadcrumbProps: {
      */
     readonly icon: {
         readonly type: PropType<HeroIcon>;
-        readonly default: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}>;
+        readonly default: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}>;
     };
     /**
      * The size of the icon in tailwind units.
@@ -65,109 +65,5 @@ export type BreadcrumbItem = {
 /**
  * The `NBreadcrumb` is a styled breadcrumb which can be used as a navigation in hierarchical views.
  */
-declare const Component: import("vue").DefineComponent<{
-    /**
-     * The items of the breadcrumb.
-     */
-    readonly items: {
-        readonly type: PropType<BreadcrumbItem[]>;
-        readonly default: () => never[];
-    };
-    /**
-     * The color of the breadcrumbs text and icons.
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    /**
-     * The text-size of the breadcrumb labels.
-     */
-    readonly textSize: {
-        readonly type: PropType<TWTextSize>;
-        readonly default: "text-base";
-    };
-    /**
-     * The icon which is used as a seperator between two breadcrumb items.
-     */
-    readonly icon: {
-        readonly type: PropType<HeroIcon>;
-        readonly default: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}>;
-    };
-    /**
-     * The size of the icon in tailwind units.
-     */
-    readonly iconSize: {
-        readonly type: NumberConstructor;
-        readonly default: 5;
-    };
-    /**
-     * Adds the classes to the separator icons.
-     */
-    readonly iconClass: StringConstructor;
-    /**
-     * A slot the replace the breadcrumb labels.
-     */
-    readonly item: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
-    /**
-     * A slot to replace the separators between the breadcrumb labels.
-     * The passsed item is the item before the seperator.
-     */
-    readonly seperator: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
-}, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * The items of the breadcrumb.
-     */
-    readonly items: {
-        readonly type: PropType<BreadcrumbItem[]>;
-        readonly default: () => never[];
-    };
-    /**
-     * The color of the breadcrumbs text and icons.
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    /**
-     * The text-size of the breadcrumb labels.
-     */
-    readonly textSize: {
-        readonly type: PropType<TWTextSize>;
-        readonly default: "text-base";
-    };
-    /**
-     * The icon which is used as a seperator between two breadcrumb items.
-     */
-    readonly icon: {
-        readonly type: PropType<HeroIcon>;
-        readonly default: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}>;
-    };
-    /**
-     * The size of the icon in tailwind units.
-     */
-    readonly iconSize: {
-        readonly type: NumberConstructor;
-        readonly default: 5;
-    };
-    /**
-     * Adds the classes to the separator icons.
-     */
-    readonly iconClass: StringConstructor;
-    /**
-     * A slot the replace the breadcrumb labels.
-     */
-    readonly item: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
-    /**
-     * A slot to replace the separators between the breadcrumb labels.
-     * The passsed item is the item before the seperator.
-     */
-    readonly seperator: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
-}>> & {}, {
-    readonly color: string;
-    readonly icon: HeroIcon;
-    readonly textSize: TWTextSize;
-    readonly items: BreadcrumbItem[];
-    readonly iconSize: number;
-}>;
+declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 export { Component as NBreadcrumb, Component as default };

package/components/NBreadcrub.js

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
 import { createComponentWithSlots } from '../utils/component';
 import { ChevronRightIcon } from '@heroicons/vue/24/solid';
 import NLink from './NLink';