ablok-components 0.0.2

package/README.md

@@ -0,0 +1,19 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
+
+1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
+2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
+
+You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
+
+adapted build lib according to:
+https://jivancic.com/posts/build-a-component-library.html#package-json-config

package/dist/App.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/dist/ablok-components.es.js

@@ -0,0 +1,109 @@
+import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, createElementVNode, renderSlot } from "vue";
+var baseIcon_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".base-icon{display:inline-block}.base-icon svg{display:block;stroke-width:0;stroke:currentColor;fill:currentColor;width:1.5em;height:1.5em}.base-icon--xxl svg{width:12rem;height:12rem}.base-icon--xl svg{width:8rem;height:8rem}.base-icon--large svg{width:4rem;height:4rem}\n")();
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "base-icon",
+  props: {
+    id: {
+      type: String,
+      default: ""
+    },
+    size: {
+      type: String,
+      default: "default"
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_SvgSprite = resolveComponent("SvgSprite");
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(["base-icon", {
+          [`base-icon--${__props.size}`]: __props.size
+        }])
+      }, [
+        createVNode(_component_SvgSprite, {
+          symbol: `icon-${__props.id}`,
+          role: "presentation"
+        }, null, 8, ["symbol"])
+      ], 2);
+    };
+  }
+});
+var loadingSpinner_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".loading-spinner{min-width:2rem}\n")();
+const _hoisted_1$1 = { class: "loading-spinner d-block" };
+const _hoisted_2$1 = { class: "loading-spinner__animation" };
+const _hoisted_3 = {
+  class: "d-block",
+  version: "1.1",
+  id: "L9",
+  xmlns: "http://www.w3.org/2000/svg",
+  "xmlns:xlink": "http://www.w3.org/1999/xlink",
+  x: "0px",
+  y: "0px",
+  viewBox: "0 0 100 100",
+  "enable-background": "new 0 0 0 0",
+  "xml:space": "preserve"
+};
+const _hoisted_4 = ["fill"];
+const _hoisted_5 = /* @__PURE__ */ createElementVNode("animateTransform", {
+  attributeName: "transform",
+  attributeType: "XML",
+  type: "rotate",
+  dur: "1s",
+  from: "0 50 50",
+  to: "360 50 50",
+  repeatCount: "indefinite"
+}, null, -1);
+const _hoisted_6 = [
+  _hoisted_5
+];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "loading-spinner",
+  props: {
+    color: {
+      type: String,
+      default: "#fff"
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", _hoisted_1$1, [
+        createElementVNode("span", _hoisted_2$1, [
+          (openBlock(), createElementBlock("svg", _hoisted_3, [
+            createElementVNode("path", {
+              fill: __props.color,
+              d: "M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+            }, _hoisted_6, 8, _hoisted_4)
+          ]))
+        ]),
+        renderSlot(_ctx.$slots, "default")
+      ]);
+    };
+  }
+});
+var baseButton_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".base-button{appearance:none;background:none;border:none}\n")();
+const _hoisted_1 = { class: "btn" };
+const _hoisted_2 = ["innerHTML"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "base-button",
+  props: {
+    caption: {
+      type: String,
+      default: "Base Button"
+    },
+    size: {
+      type: String,
+      default: "default"
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", _hoisted_1, [
+        createElementVNode("span", {
+          class: "caption",
+          innerHTML: __props.caption
+        }, null, 8, _hoisted_2)
+      ]);
+    };
+  }
+});
+export { _sfc_main as BaseButton, _sfc_main$2 as BaseIcon, _sfc_main$1 as LoadingSpinner };

package/dist/ablok-components.umd.js

@@ -0,0 +1,4 @@
+(function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n.AblokComponents={},n.Vue))})(this,function(n,e){"use strict";var g=(()=>`.base-icon{display:inline-block}.base-icon svg{display:block;stroke-width:0;stroke:currentColor;fill:currentColor;width:1.5em;height:1.5em}.base-icon--xxl svg{width:12rem;height:12rem}.base-icon--xl svg{width:8rem;height:8rem}.base-icon--large svg{width:4rem;height:4rem}
+`)();const s=e.defineComponent({__name:"base-icon",props:{id:{type:String,default:""},size:{type:String,default:"default"}},setup(t){return(o,i)=>{const f=e.resolveComponent("SvgSprite");return e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(["base-icon",{[`base-icon--${t.size}`]:t.size}])},[e.createVNode(f,{symbol:`icon-${t.id}`,role:"presentation"},null,8,["symbol"])],2)}}});var h=(()=>`.loading-spinner{min-width:2rem}
+`)();const a={class:"loading-spinner d-block"},r={class:"loading-spinner__animation"},l={class:"d-block",version:"1.1",id:"L9",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",x:"0px",y:"0px",viewBox:"0 0 100 100","enable-background":"new 0 0 0 0","xml:space":"preserve"},c=["fill"],d=[e.createElementVNode("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"1s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"},null,-1)],p=e.defineComponent({__name:"loading-spinner",props:{color:{type:String,default:"#fff"}},setup(t){return(o,i)=>(e.openBlock(),e.createElementBlock("span",a,[e.createElementVNode("span",r,[(e.openBlock(),e.createElementBlock("svg",l,[e.createElementVNode("path",{fill:t.color,d:"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"},d,8,c)]))]),e.renderSlot(o.$slots,"default")]))}});var y=(()=>`.base-button{appearance:none;background:none;border:none}
+`)();const _={class:"btn"},m=["innerHTML"],u=e.defineComponent({__name:"base-button",props:{caption:{type:String,default:"Base Button"},size:{type:String,default:"default"}},setup(t){return(o,i)=>(e.openBlock(),e.createElementBlock("button",_,[e.createElementVNode("span",{class:"caption",innerHTML:t.caption},null,8,m)]))}});n.BaseButton=u,n.BaseIcon=s,n.LoadingSpinner=p,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/components/base-button.vue.d.ts

@@ -0,0 +1,23 @@
+declare const _default: import("vue").DefineComponent<{
+    caption: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    caption: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    caption: string;
+    size: string;
+}>;
+export default _default;

package/dist/components/base-icon.vue.d.ts

@@ -0,0 +1,23 @@
+declare const _default: import("vue").DefineComponent<{
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    size: string;
+    id: string;
+}>;
+export default _default;

package/dist/components/loading-spinner.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _default: import("vue").DefineComponent<{
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    color: string;
+}>;
+export default _default;

package/dist/i18n.d.ts

@@ -0,0 +1,166 @@
+declare const i18n: import("vue-i18n").I18n<{
+    en: {
+        welcome: string;
+        common: {
+            id: string;
+            name: string;
+            type: string;
+            yes: string;
+            no: string;
+            ok: string;
+            all: string;
+            accept: string;
+            approve: string;
+            reject: string;
+            review: string;
+            featured: string;
+            pending: string;
+            cancel: string;
+            submit: string;
+            select: string;
+            close: string;
+            back: string;
+            prev: string;
+            previous: string;
+            next: string;
+            play: string;
+            start: string;
+            stop: string;
+            pause: string;
+            reset: string;
+            undo: string;
+            redo: string;
+            forward: string;
+            rewind: string;
+            time: string;
+            moves: string;
+            congratulations: string;
+            thanks: string;
+            participants: string;
+            moderate: string;
+            active: string;
+            success: string;
+            save: string;
+            or: string;
+            skip: string;
+            readMore: string;
+            download: string;
+        };
+        form: {
+            mandatoryNote: string;
+            consents: string;
+        };
+        consents: {
+            tc: string;
+            tos: string;
+            privacy: string;
+            thirdParty: string;
+            dialog: string;
+        };
+        memoryGame: {
+            congratulations: string;
+            playAgain: string;
+            brandLink: string;
+        };
+        cameraInput: {
+            waitForCameraNotification: string;
+            camera: string;
+            switch: string;
+            capture: string;
+        };
+        svgEditor: {};
+        event: {
+            page: string;
+            pages: string;
+            branding: string;
+            header: string;
+            footer: string;
+        };
+        fileInput: {
+            coverTitle: string;
+            coverLaunchCta: string;
+            coverLocalSelectTitle: string;
+            coverDropTarget: string;
+            coverLocalFileCta: string;
+            captureTitle: string;
+            reviewTitle: string;
+            dragDropCta: string;
+            selectFileDialogCta: string;
+            selectCameraCta: string;
+            dropTargetLabel: string;
+            shoot: string;
+            fileTooLarge: string;
+        };
+        editor: {
+            header: {
+                headline: string;
+            };
+            footer: {
+                headline: string;
+            };
+            form: {
+                headline: string;
+            };
+            consents: {
+                headline: string;
+            };
+            fields: {
+                headline: string;
+            };
+        };
+        photoBooth: {
+            removeBackgroundCaption: string;
+            saveMergedCaption: string;
+        };
+        sharing: {
+            bodyText: string;
+            facebook: string;
+            twitter: string;
+            instagram: string;
+            linkedin: string;
+            email: string;
+            clipboard: string;
+            instructions: string;
+        };
+        testing: {
+            headline: string;
+            text: string;
+        };
+        search: {
+            noResults: string;
+        };
+        admin: {
+            finder: {
+                title: string;
+                create: string;
+            };
+            event: {
+                create: {
+                    title: string;
+                    save: string;
+                };
+                edit: {
+                    title: string;
+                    saveAs: string;
+                    save: string;
+                };
+                delete: {
+                    confirmation: string;
+                };
+                lang: {
+                    delete: {
+                        confirmation: string;
+                    };
+                };
+                page: {
+                    add: string;
+                    clone: string;
+                    delete: {
+                        confirmation: string;
+                    };
+                };
+            };
+        };
+    };
+}, {}, {}, string, false>;
+export default i18n;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as BaseIcon } from "./components/base-icon.vue";
+export { default as LoadingSpinner } from "./components/loading-spinner.vue";
+export { default as BaseButton } from "./components/base-button.vue";

package/dist/locales/en.d.ts

@@ -0,0 +1,164 @@
+export declare const messages: {
+    welcome: string;
+    common: {
+        id: string;
+        name: string;
+        type: string;
+        yes: string;
+        no: string;
+        ok: string;
+        all: string;
+        accept: string;
+        approve: string;
+        reject: string;
+        review: string;
+        featured: string;
+        pending: string;
+        cancel: string;
+        submit: string;
+        select: string;
+        close: string;
+        back: string;
+        prev: string;
+        previous: string;
+        next: string;
+        play: string;
+        start: string;
+        stop: string;
+        pause: string;
+        reset: string;
+        undo: string;
+        redo: string;
+        forward: string;
+        rewind: string;
+        time: string;
+        moves: string;
+        congratulations: string;
+        thanks: string;
+        participants: string;
+        moderate: string;
+        active: string;
+        success: string;
+        save: string;
+        or: string;
+        skip: string;
+        readMore: string;
+        download: string;
+    };
+    form: {
+        mandatoryNote: string;
+        consents: string;
+    };
+    consents: {
+        tc: string;
+        tos: string;
+        privacy: string;
+        thirdParty: string;
+        dialog: string;
+    };
+    memoryGame: {
+        congratulations: string;
+        playAgain: string;
+        brandLink: string;
+    };
+    cameraInput: {
+        waitForCameraNotification: string;
+        camera: string;
+        switch: string;
+        capture: string;
+    };
+    svgEditor: {};
+    event: {
+        page: string;
+        pages: string;
+        branding: string;
+        header: string;
+        footer: string;
+    };
+    fileInput: {
+        coverTitle: string;
+        coverLaunchCta: string;
+        coverLocalSelectTitle: string;
+        coverDropTarget: string;
+        coverLocalFileCta: string;
+        captureTitle: string;
+        reviewTitle: string;
+        dragDropCta: string;
+        selectFileDialogCta: string;
+        selectCameraCta: string;
+        dropTargetLabel: string;
+        shoot: string;
+        fileTooLarge: string;
+    };
+    editor: {
+        header: {
+            headline: string;
+        };
+        footer: {
+            headline: string;
+        };
+        form: {
+            headline: string;
+        };
+        consents: {
+            headline: string;
+        };
+        fields: {
+            headline: string;
+        };
+    };
+    photoBooth: {
+        removeBackgroundCaption: string;
+        saveMergedCaption: string;
+    };
+    sharing: {
+        bodyText: string;
+        facebook: string;
+        twitter: string;
+        instagram: string;
+        linkedin: string;
+        email: string;
+        clipboard: string;
+        instructions: string;
+    };
+    testing: {
+        headline: string;
+        text: string;
+    };
+    search: {
+        noResults: string;
+    };
+    admin: {
+        finder: {
+            title: string;
+            create: string;
+        };
+        event: {
+            create: {
+                title: string;
+                save: string;
+            };
+            edit: {
+                title: string;
+                saveAs: string;
+                save: string;
+            };
+            delete: {
+                confirmation: string;
+            };
+            lang: {
+                delete: {
+                    confirmation: string;
+                };
+            };
+            page: {
+                add: string;
+                clone: string;
+                delete: {
+                    confirmation: string;
+                };
+            };
+        };
+    };
+};
+export default messages;

package/dist/main.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/style.css

@@ -0,0 +1 @@
+.base-icon{display:inline-block}.base-icon svg{display:block;stroke-width:0;stroke:currentColor;fill:currentColor;width:1.5em;height:1.5em}.base-icon--xxl svg{width:12rem;height:12rem}.base-icon--xl svg{width:8rem;height:8rem}.base-icon--large svg{width:4rem;height:4rem}.loading-spinner{min-width:2rem}.base-button{appearance:none;background:none;border:none}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "ablok-components",
+  "private": false,
+  "version": "0.0.2",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "build-lib-bak": "vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types",
+    "build-lib": "vite build && vue-tsc --emitDeclarationOnly"
+  },
+  "dependencies": {
+    "ablok-components": "ablok-components-0.0.2.tgz",
+    "express": "^4.18.1",
+    "vue": "^3.2.25",
+    "vue-i18n": "^9.2.0-beta.36"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.25"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.45",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "path": "^0.12.7",
+    "sass": "^1.52.3",
+    "typescript": "^4.5.4",
+    "vite": "^2.9.9",
+    "vue-svg-sprite": "^2.2.1",
+    "vue-tsc": "^0.35.2"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/ablok-components.umd.js",
+  "module": "./dist/ablok-components.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/ablok-components.es.js",
+      "require": "./dist/ablok-components.umd.js"
+    }
+  },
+  "types": "./dist/types/index.d.ts"
+}