manolis-ui 0.0.11 → 0.0.13

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "manolis-ui",
   "private": false,
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
-  "main": "dist/manolis-ui.js",
-  "module": "dist/manolis-ui.umd.js",
+  "files": [
+    "dist/*"
+  ],
+  "main": "./dist/manolis-ui.js",
+  "module": "./dist/manolis-ui.umd.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {

package/.github/workflows/deploy_and_publish.yml

@@ -1,113 +0,0 @@
-name: Deploy to GitHub Pages and npm
-
-on:
-  push:
-    branches:
-      - master
-
-jobs:
-  build-and-deploy:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0  # Important: Fetch all history for accurate version bumping
-
-      - uses: pnpm/action-setup@v3
-        name: Install pnpm
-        with:
-          run_install: false
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20
-          cache: 'pnpm'
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Install dependencies
-        run: pnpm install
-
-      # --- Version Bumping ---
-      - name: Bump Version and Commit
-        id: version_bump
-        run: |
-          LAST_COMMIT_MESSAGE=$(git log -1 --pretty=%B)
-
-          if [[ "$LAST_COMMIT_MESSAGE" == *"BREAKING CHANGE"* ]]; then
-            BUMP_TYPE="major"
-          elif [[ "$LAST_COMMIT_MESSAGE" == *"feat:"* ]]; then
-            BUMP_TYPE="minor"
-          else
-            BUMP_TYPE="patch"
-          fi
-
-          # Get the current version
-          CURRENT_VERSION=$(node -p "require('./package.json').version")
-
-          # Determine the new version based on bump type (you might need to implement your own logic here)
-          if [[ "$BUMP_TYPE" == "major" ]]; then
-            NEW_VERSION=$(node -p "('${CURRENT_VERSION}'.split('.').map((x, i) => i === 0 ? parseInt(x) + 1 : 0)).join('.')")
-          elif [[ "$BUMP_TYPE" == "minor" ]]; then
-            NEW_VERSION=$(node -p "('${CURRENT_VERSION}'.split('.').map((x, i) => i === 1 ? parseInt(x) + 1 : (i > 1 ? 0 : x))).join('.')")
-          else
-            NEW_VERSION=$(node -p "('${CURRENT_VERSION}'.split('.').map((x, i) => i === 2 ? parseInt(x) + 1 : x)).join('.')")
-          fi
-
-          # Update package.json with the new version (using a temporary file)
-          TMP_FILE=$(mktemp)
-          node -p "JSON.stringify({...require('./package.json'), version: '$NEW_VERSION'}, null, 2)" > "$TMP_FILE"
-          mv "$TMP_FILE" package.json
-
-          # Validate JSON syntax
-          jq '.' package.json
-          
-          # Configure Git user
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-          git config user.name "github-actions[bot]"
-
-          # Stage and commit the changes
-          git add package.json
-          git commit -m "chore(release): v$NEW_VERSION [skip ci]"
-
-          # Now create the tag
-          git tag "v$NEW_VERSION"
-
-          echo "new_version=$NEW_VERSION" >> $GITHUB_OUTPUT
-        shell: bash
-
-      - name: Push changes
-        run: |
-          git push origin HEAD --tags
-        shell: bash
-
-
-      # --- Build ---
-      - name: Build Library
-        run: pnpm build  # Replace 'build' with your actual library build script
-
-      - name: Build Storybook
-        run: pnpm build-storybook
-
-      - name: Deploy Storybook to GitHub Pages
-        uses: peaceiris/actions-gh-pages@v3
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./storybook-static
-
-      # --- Publish ---
-      # Step 6: Publish to npm
-      - name: Publish to npm
-        run: pnpm publish --no-git-checks
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_ }} # Use the npm token stored in GitHub Secrets
-
-      # --- Push Changes (including new tag) ---
-      - name: Push Changes (including tag)
-        run: |
-          git config --global user.name "GitHub Actions Bot"
-          git config --global user.email "actions@github.com"
-          git push origin HEAD:master --follow-tags
-        if: success()  # Only push if the previous steps were successful

package/.storybook/main.ts

@@ -1,34 +0,0 @@
-import type { StorybookConfig } from "@storybook/vue3-vite";
-
-const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-
-  addons: [
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
-    "@storybook/addon-links",
-    "storybook-addon-vue-slots",
-    {
-      name: '@storybook/addon-postcss',
-      options: {
-        cssLoaderOptions: {
-          importLoaders: 1,
-        },
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
-        },
-      },
-    }    
-  ],
-
-  framework: {
-    name: "@storybook/vue3-vite",
-    options: {},
-  },
-
-  docs: {
-    autodocs: true
-  }
-};
-export default config;

package/.storybook/preview.ts

@@ -1,17 +0,0 @@
-import type { Preview } from "@storybook/vue3";
-import "../src/style.css"
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-
-  tags: ["autodocs"]
-};
-
-export default preview;

package/.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar"]
-}

package/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>

package/postcss.config.js

@@ -1,2 +0,0 @@
-export default {
-}

package/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.vue

@@ -1,19 +0,0 @@
-<!-- <script setup lang="ts">
-import { ref } from 'vue';
-import Input from './components/data-input/input.vue';
-// Reactive properties for input values
-const password = ref("");
-const email = ref("");
-
-// import HelloWorld from './components/HelloWorld.vue'
-</script>
-
-<template>
-  <div class="p-4">
-    <Input
-      v-model="password"
-      placeholder="Enter your username"
-      type="tel"
-    />
-  </div>
-</template> -->

package/src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/actions/ButtonComponent.vue

@@ -1,80 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-interface Props {
-    outlined?: boolean,
-    active?: boolean,
-    loading?: boolean,
-    type?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'ghost' | 'link' | 'info' | 'success' | 'warning' | 'error';
-    size?: string;
-    shape?: 'square' | 'circle';
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    outlined: false,
-    active: false,
-    loading: false
-});
-
-const sizeClass = computed(() => {
-    switch (props.size) {
-        case 'large':
-            return 'btn-lg';
-        case 'small':
-            return 'btn-sm';
-        case 'tiny':
-            return 'btn-tiny';
-        case 'wide':
-            return 'btn-wide';
-        case 'full':
-            return 'w-full';
-        default:
-            return '';
-    }
-});
-
-const buttonType = computed(() => {
-    switch (props.type) {
-        case "neutral":
-            return "btn-neutral";
-        case "primary":
-            return "btn-primary";
-        case "secondary":
-            return "btn-secondary";
-        case "accent":
-            return "btn-accent";
-        case "ghost":
-            return "btn-ghost";
-        case "link":
-            return "btn-link px-0!";
-        case "info":
-            return "btn-info";
-        case "success":
-            return "btn-success";
-        case "warning":
-            return "btn-warning";
-        case "error":
-            return "btn-error";
-        default:
-            return "btn-neutral";
-    }
-});
-
-const shapeClass = computed(() => {
-    switch (props.shape) {
-        case "square":
-            return "btn-square";
-        case "circle":
-            return "btn-circle";
-        default:
-            return "";
-    }
-});
-</script>
-
-<template>
-    <button
-        :class="['btn', {['btn-outline']: props.outlined }, {['btn-active']: props.active }, buttonType, sizeClass, shapeClass]">
-        <span v-if="loading" class="loading loading-spinner"></span>
-        <slot>Submit</slot>
-    </button>
-</template>

package/src/components/actions/dropdown.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-interface Props {
-    items?: Array<dropdownItem>;
-    position?: keyof typeof dropdownPosition;
-    floatPosition?: keyof typeof dropdownFloatPosition;
-    openOnHover?: boolean,
-    forceOpen?: boolean
-}
-
-interface dropdownItem {
-    text: string,
-    link: string,
-}
-
-const dropdownPosition = {
-    left: "dropdown-left",
-    right: "dropdown-right",
-    bottom: "dropdown-bottom",
-    top: "dropdown-top"
-}
-
-const dropdownFloatPosition = {
-    start: "",
-    end: "dropdown-end"
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    position: "bottom",
-    floatPosition: "start",
-    openOnHover: false,
-    forceOpen: false,
-});</script>
-
-<template>
-    <div class="dropdown" :class="dropdownPosition[props.position], dropdownFloatPosition[props.floatPosition],{ ['dropdown-open']: props.forceOpen } , { ['dropdown-hover']: props.openOnHover }">
-        <!-- this has to be a button -->
-        <slot tabindex="0" role="button">
-            <div class="m-1 btn">Open dropdown</div>
-        </slot>
-        <ul tabindex="0" class="z-1 bg-base-100 shadow-sm p-2 rounded-sm min-w-[inherit] md:min-w-full xl:min-w-52 dropdown-content menu">
-            <li v-for="item in items"><a :href="item.link">{{ item.text }}</a></li>
-            <slot name="additional"></slot>
-        </ul>
-
-    </div>
-</template>

package/src/components/actions/modal.vue

@@ -1,52 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-interface Props {
-    position?: keyof typeof modalPosition;
-    withBackdrop?: boolean,
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    position: "center",
-    withBackdrop: false
-});
-
-const modalPosition = {
-    top: "modal-top",
-    bottom: "modal-bottom",
-    center: "modal-middle"
-}
-
-const dialog = ref<HTMLDialogElement | null>(null);
-
-const openDialog = (): void => {
-    dialog.value?.showModal();
-}
-
-const closeDialog = (): void => {
-    dialog.value?.close();
-}
-
-</script>
-
-<template>
-    <span class="w-fit cursor-pointer" @click="openDialog">
-        <slot name="trigger" role="button">
-            <button class="btn">Open</button>
-        </slot>
-    </span>
-    
-    <dialog ref="dialog" class="modal" :class="modalPosition[props.position]">
-        <div class="modal-box">
-            <slot></slot>
-            <div class="modal-action">
-                <slot name="actions" />
-                <form method="dialog" @submit="closeDialog" :class="withBackdrop ? 'modal-backdrop' : ''">
-                    <slot name="close-button">
-                        <button class="btn">Close</button>
-                    </slot>
-                </form>
-            </div>
-        </div>
-    </dialog>
-</template>

package/src/components/actions/swap.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-interface Props {
-    effect?: "rotate" | "flip"
-}
-
-const props = defineProps<Props>();
-</script>
-
-<template>
-    <label class="swap" :class="props.effect ? `swap-${effect}` : ''">
-        <input type="checkbox" />
-        <div class="swap-on"><slot name="on"></slot></div>
-        <div class="swap-off"><slot name="off"></slot></div>
-    </label>
-</template>

package/src/components/actions/theme-controller.vue

@@ -1,52 +0,0 @@
-<script lang="ts" setup>
-import { Sun, Moon } from 'lucide-vue-next';
-import { watch, onMounted } from 'vue';
-import { useLocalStorage } from '../../composables/useLocalStorage'; // Import the custom composable
-
-// Define the Props interface and default values
-interface Props {
-    lightTheme?: string;
-    darkTheme?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    lightTheme: 'light',
-    darkTheme: 'dark'
-});
-
-// Use the composable for localStorage functionality
-const themeValue = useLocalStorage('theme', props.lightTheme);
-
-// Function to apply DaisyUI theme using `data-theme` attribute
-function updateTheme(theme: string) {
-    if (typeof window !== 'undefined' && window.document) {
-        const htmlElement = document.documentElement;
-        htmlElement.setAttribute('data-theme', theme);
-    }
-}
-
-// Apply the theme on mounted (client-side only)
-onMounted(() => updateTheme(themeValue.value ? themeValue.value : ""));
-
-// Watch themeValue changes and update localStorage
-watch(themeValue, (newValue : any) => {
-    updateTheme(newValue); // Apply the theme change
-});
-</script>
-
-<template>
-    <label class="swap-rotate swap">
-        <!-- Checkbox controls the state -->
-        <input
-            type="checkbox"
-            class="theme-controller"
-            v-model="themeValue"
-            :true-value="props.lightTheme"
-            :false-value="props.darkTheme"
-        />
-        <!-- Sun icon for light mode -->
-        <Sun class="swap-off fill-current"></Sun>
-        <!-- Moon icon for dark mode -->
-        <Moon class="swap-on fill-current"></Moon>
-    </label>
-</template>

package/src/components/data-display/accordion.vue

@@ -1,29 +0,0 @@
-<script lang="ts" setup>
-
-const props = withDefaults(defineProps<Props>(), {
-    joinItems: false
-});
-
-interface Props {
-    name: string;
-    items: Array<Accordion>;
-    joinItems?: boolean;
-    icon?: "arrow" | "plus";
-}
-
-interface Accordion {
-    title: string;
-    content: string;
-}
-</script>
-
-
-<template>
-    <div class="collapse border border-base-300" :class="[icon ? `collapse-${icon}` : '', { ['join-item']: joinItems }]" v-for="(item, index) in props.items" :key="index">
-        <input type="radio" :name="name" value="true" />
-        <div class="collapse-title font-bold text-2xl lg:text-4xl">{{item.title}}</div>
-        <div class="collapse-content">
-            <span v-html="item.content"></span>
-        </div>
-    </div>
-</template>

package/src/components/data-display/avatar.vue

@@ -1,36 +0,0 @@
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-
-interface Props {
-    image: string,
-    onlineStatus?: "online" | "offline" | "none",
-    initials?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    onlineStatus: "none"
-});
-
-const onlineStatusValue = ref<"online" | "offline" | "none">(props.onlineStatus);
-watch(
-    () => props.onlineStatus,
-    (newValue) => {
-        if (newValue) {
-            onlineStatusValue.value = newValue;
-        }
-    }
-);
-
-</script>
-
-<template>
-    <div class="avatar" :class="`avatar-${onlineStatus}`">
-        <div class="rounded-sm" v-if="image">
-            <img :src="image" class="w-full h-full">
-        </div>
-
-        <div v-else class="flex justify-center bg-neutral p-[25%] rounded-full w-16 text-neutral-content text-center">
-            <p class="text-xl">{{initials}}</p>
-        </div>
-    </div>
-</template>

package/src/components/data-display/badge.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-const props = withDefaults(defineProps<Props>(), {
-    color: "neutral",
-    outline: false,
-    size: "medium"
-});
-const sizes = {
-    'extra small': 'badge-xs',
-    small: "badge-sm",
-    medium: "badge-md",
-    large: "badge-lg",
-}
-
-const colors = {
-    neutral: "badge-neutral",
-    primary: "badge-primary",
-    secondary: "badge-secondary",
-    accent: "badge-accent",
-    ghost: "badge-ghost",
-    info: "badge-info",
-    success: "badge-success",
-    warning: "badge-warning",
-    error: "badge-error"
-}
-
-interface Props {
-    color?: "neutral" | "primary" | "secondary" | "accent" | "ghost" | "info" | "success" | "warning" | "error"
-    outline?: boolean,
-    size?: "extra small" | "small" | "medium" | "large"
-}
-</script>
-
-<template>
-    <span class="badge" :class="sizes[props.size], colors[props.color], {['badge-outline']: props.outline }"><slot></slot></span>
-</template>

package/src/components/data-display/card.vue

@@ -1,60 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue';
-
-interface Props {
-  imgUrl: string;
-  alt?: string;
-  title?: string;
-  description?: string;
-  outlined?: boolean;
-  loading: boolean;
-  class: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  imgUrl: "",
-  alt: "A beautiful picture that says something about this card",
-  title: '',
-  outlined: false,
-  description: "",
-  loading: false,
-  class: ""
-});
-
-const outlined = ref<boolean>(props.outlined);
-
-watch(
-  () => props.outlined,
-  (newValue) => {
-    outlined.value = newValue;
-  }
-);
-</script>
-
-
-<template>
-  <div class="bg-base-100 shadow-xl rounded-sm min-w-64 max-w-full h-full card card-compact group"
-    :class="outlined? 'border-4 border-primary': ''">
-    <figure>
-      <img :src="imgUrl" :alt="alt" class="rounded-sm w-full h-44 object-cover" v-if="imgUrl || imgUrl && !loading" :class="{
-        'hidden': loading
-      }" />
-      <div class="w-full h-32 skeleton" v-if="loading && imgUrl"></div>
-    </figure>
-    <div class="card-body" v-if="!loading">
-      <h2 class="group-hover:text-primary text-left text-lg cursor-pointer card-title" v-if="title">{{ title }}</h2>
-      <slot name="details"></slot>
-      <p class="text-left" v-if="description">{{ description }}</p>
-      <div class="flex-col flex-nowrap mt-auto card-actions">
-        <slot name="actions" />
-      </div>
-    </div>
-    <div class="card-body" v-if="loading">
-      <div class="flex flex-col gap-4 w-52">
-        <div class="w-28 h-4 skeleton"></div>
-        <div class="w-full h-4 skeleton"></div>
-        <div class="w-full h-4 skeleton"></div>
-      </div>
-    </div>
-  </div>
-</template>