manolis-ui 0.0.11 → 0.0.13

package/src/stories/actions/Swap.stories.ts

@@ -1,56 +0,0 @@
-import Swap from '../../components/actions/swap.vue'; // Adjust the path as per your setup
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Actions/Swap',
-  component: Swap,
-  tags: ['autodocs'], // Include autodocs tag
-  argTypes: {
-    effect: {
-      control: 'select',
-      options: ['rotate', 'flip'],
-      description: 'The effect applied to the swap component.',
-    },
-  },
-} as Meta<typeof Swap>;
-
-const Template: StoryFn<typeof Swap> = (args, { slots }) => ({
-  components: { Swap },
-  setup() {
-    return { args, slots };
-  },
-  template: `
-    <Swap v-bind="args">
-      <template #on>
-        <div class="text-green-500 font-bold">On</div>
-      </template>
-      <template #off>
-        <div class="text-red-500 font-bold">Off</div>
-      </template>
-    </Swap>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  effect: 'rotate',
-};
-Default.parameters = {
-  docs: {
-    description: {
-      component: 'A swap component with optional effects and customizable slots for "on" and "off" states.',
-    },
-  },
-};
-
-export const FlipEffect = Template.bind({});
-FlipEffect.args = {
-  effect: 'flip',
-};
-FlipEffect.parameters = {
-  docs: {
-    description: {
-      story: 'This variant applies the "flip" effect to the swap component.',
-    },
-  },
-};

package/src/stories/actions/ThemeSwitcher.stories.ts

@@ -1,41 +0,0 @@
-import ThemeSwitcher from '../../components/actions/theme-controller.vue'; // Adjust the path as per your setup
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Actions/ThemeSwitcher',
-  component: ThemeSwitcher,
-  tags: ['autodocs'], // Include autodocs tag
-  argTypes: {
-    darkTheme: {
-      control: 'text',
-      description: "Define the name of your dark theme here",
-    },
-    lightTheme: {
-      control: 'text',
-      description: "Define the name of your light theme here",
-    }
-  },
-} as Meta<typeof ThemeSwitcher>;
-
-const Template: StoryFn<typeof ThemeSwitcher> = (args) => ({
-  components: { ThemeSwitcher },
-  setup() {
-    return { args };
-  },
-  template: `
-    <ThemeSwitcher v-bind="args" />
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  darkTheme: 'reserveren-dark',
-  lightTheme: 'reserveren-light',
-};
-Default.parameters = {
-  docs: {
-    description: {
-      component: 'A theme switcher component that toggles between light and dark themes with localStorage support.',
-    },
-  },
-};

package/src/stories/data-display/accordion.stories.ts

@@ -1,49 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import Accordion from '../../components/data-display/accordion.vue'
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const meta = {
-    title: 'Data Display/Accordion',
-    component: Accordion,
-    parameters: {
-        slots: {
-        },
-    },
-    // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
-    tags: ['autodocs'],
-    argTypes: {
-        name: {control: "text", type: "string"},
-        items: {control: "object"},
-        joinItems: {control: "boolean", description: "Glue every item together or seperate every item."},
-        icon: {control: "radio", options: ["arrow", "plus"]}
-    },
-
-    args: {
-        joinItems: false,
-        items: [
-            {
-                title: "item 1",
-                content: "this is some text you can adjust with a wysiwyg editor or just in plain text",
-            },
-            {
-                title: "item 2",
-                content: "this is also some text you can adjust with a <strong>wysiwyg</strong> editor or just in plain text/html",
-            }
-        ],
-    },
-} satisfies Meta<typeof Accordion>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
-    args: {
-        name: "demo-accordion",
-        joinItems: false,
-        icon: "plus",
-    },
-};

package/src/stories/data-display/avatar.stories.ts

@@ -1,75 +0,0 @@
-import Avatar from '../../components/data-display/avatar.vue'; // Adjust the path as per your setup
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Data Display/Avatar',
-  component: Avatar,
-  tags: ['autodocs'], // Include autodocs tag
-  argTypes: {
-    image: {
-      control: 'text',
-      description: 'URL of the avatar image.',
-    },
-    onlineStatus: {
-      control: 'select',
-      options: ['online', 'offline', 'none'],
-      description: 'Online status of the avatar.',
-    },
-    initials: {
-        control: "text",
-        description: 'The Initials of the user'
-    }
-  },
-} as Meta<typeof Avatar>;
-
-const Template: StoryFn<typeof Avatar> = (args) => ({
-  components: { Avatar },
-  setup() {
-    return { args };
-  },
-  template: `
-    <Avatar v-bind="args" />
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  image: 'https://randomuser.me/api/portraits/men/32.jpg', // Example image URL
-  onlineStatus: "none",
-  initials: "JM",
-};
-Default.parameters = {
-  docs: {
-    description: {
-      component: 'An avatar component that displays an online/offline status based on the `online` prop.',
-    },
-  },
-};
-
-export const Online = Template.bind({});
-Online.args = {
-  image: 'https://randomuser.me/api/portraits/men/32.jpg', // Example image URL
-  onlineStatus: "online",
-  initials: "SYP",
-};
-Online.parameters = {
-  docs: {
-    description: {
-      component: 'An avatar component that displays an online/offline status based on the `online` prop.',
-    },
-  },
-};
-
-export const Offline = Template.bind({});
-Offline.args = {
-  image: 'https://randomuser.me/api/portraits/men/32.jpg', // Example image URL
-  onlineStatus: "offline",
-  initials: 'SS'
-};
-Offline.parameters = {
-  docs: {
-    description: {
-      story: 'This variant displays the avatar with an offline status.',
-    },
-  },
-};

package/src/stories/data-display/badge.stories.ts

@@ -1,76 +0,0 @@
-import Badge from '../../components/data-display/badge.vue'; // Adjust the path as per your setup
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Data Display/Badge',
-  component: Badge,
-  tags: ['autodocs'], // Include autodocs tag
-  argTypes: {
-    color: {
-      control: 'select',
-      options: ['neutral', 'primary', 'secondary', 'accent', 'ghost', 'info', 'success', 'warning', 'error'],
-      description: 'Sets the color of the badge.',
-    },
-    outline: {
-      control: 'boolean',
-      description: 'If true, the badge will have an outline style.',
-    },
-    size: {
-      control: 'select',
-      options: ['extra small', 'small', 'medium', 'large'],
-      description: 'Sets the size of the badge.',
-    },
-  },
-} as Meta<typeof Badge>;
-
-const Template: StoryFn<typeof Badge> = (args) => ({
-  components: { Badge },
-  setup() {
-    return { args };
-  },
-  template: `
-    <Badge v-bind="args">New</Badge>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  color: 'primary',
-  outline: false,
-  size: 'medium',
-};
-Default.parameters = {
-  docs: {
-    description: {
-      component: 'A customizable badge component with different colors, sizes, and outline styles.',
-    },
-  },
-};
-
-export const Outlined = Template.bind({});
-Outlined.args = {
-  color: 'success',
-  outline: true,
-  size: 'small',
-};
-Outlined.parameters = {
-  docs: {
-    description: {
-      story: 'This variant demonstrates a badge with the outline style enabled.',
-    },
-  },
-};
-
-export const LargeWarning = Template.bind({});
-LargeWarning.args = {
-  color: 'warning',
-  outline: false,
-  size: 'large',
-};
-LargeWarning.parameters = {
-  docs: {
-    description: {
-      story: 'This variant shows a large-sized badge with a warning color.',
-    },
-  },
-};

package/src/stories/data-display/card.stories.ts

@@ -1,79 +0,0 @@
-import Card from '../../components/data-display/card.vue'; // Adjust the path as per your setup
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Data Display/Card',
-  component: Card,
-  tags: ['autodocs'], // Include autodocs tag
-  argTypes: {
-    imgUrl: {
-      control: 'text',
-      description: 'URL of the image to display on the card.',
-    },
-    alt: {
-      control: 'text',
-      description: 'Alt text for the image.',
-    },
-    title: {
-      control: 'text',
-      description: 'Title displayed on the card.',
-    },
-    description: {
-      control: 'text',
-      description: 'Description text for the card.',
-    },
-    outlined: {
-      control: 'boolean',
-      description: 'If true, applies an outline style to the card.',
-    },
-  },
-} as Meta<typeof Card>;
-
-const Template: StoryFn<typeof Card> = (args) => ({
-  components: { Card },
-  setup() {
-    return { args };
-  },
-  template: `
-    <Card v-bind="args">
-      <template #details>
-        <p>This is additional content passed through the details slot.</p>
-      </template>
-      <template #actions>
-        <button class="btn btn-primary">Action Button</button>
-      </template>
-    </Card>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  imgUrl: 'https://via.placeholder.com/300x200',
-  alt: 'Placeholder image',
-  title: 'Card Title',
-  description: 'This is a description of the card.',
-  outlined: false,
-};
-Default.parameters = {
-  docs: {
-    description: {
-      component: 'A card component that can display an image, title, description, and has an optional outlined style.',
-    },
-  },
-};
-
-export const OutlinedCard = Template.bind({});
-OutlinedCard.args = {
-  imgUrl: 'https://via.placeholder.com/300x200',
-  alt: 'Placeholder image',
-  title: 'Outlined Card Title',
-  description: 'This card has an outline style applied.',
-  outlined: true,
-};
-OutlinedCard.parameters = {
-  docs: {
-    description: {
-      story: 'This variant demonstrates a card with the outline style enabled.',
-    },
-  },
-};

package/src/stories/data-input/rating.stories.ts

@@ -1,73 +0,0 @@
-import Rating from '../../components/data-input/rating.vue';
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Data Input/Rating',
-  component: Rating,
-  tags: ['autodocs'], // Include autodocs tag
-  argTypes: {
-    initialRating: {
-      control: 'number',
-      description: 'The initial rating value.',
-    },
-    numberOfStars: {
-      control: 'number',
-      description: 'The total number of stars to display.',
-    },
-    halfStars: {
-      control: 'boolean',
-      description: 'If true, allows half-star ratings.',
-    },
-    isInteractive: {
-      control: 'boolean',
-      description: 'If true, allows users to interact and change the rating.',
-    },
-    size: {
-      control: 'select',
-      options: ['xs', 'sm', 'md', 'lg'],
-      description: 'The size of the star icons.',
-    },
-  },
-} as Meta<typeof Rating>;
-
-const Template: StoryFn<typeof Rating> = (args) => ({
-  components: { Rating },
-  setup() {
-    return { args };
-  },
-  template: `
-    <Rating v-bind="args" />
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  initialRating: 2.5,
-  numberOfStars: 5,
-  halfStars: false,
-  isInteractive: false,
-  size: 'sm',
-};
-Default.parameters = {
-  docs: {
-    description: {
-      component: 'A star rating component with options for interactivity, half-star ratings, and size customization.',
-    },
-  },
-};
-
-export const Interactive = Template.bind({});
-Interactive.args = {
-  initialRating: 3,
-  numberOfStars: 5,
-  halfStars: false,
-  isInteractive: true,
-  size: 'xs',
-};
-Interactive.parameters = {
-  docs: {
-    description: {
-      story: 'This variant allows users to interact and change the rating.',
-    },
-  },
-};

package/src/stories/feedback/Loader.stories.ts

@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import Loader from '../../components/feedback/loader.vue'
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const meta = {
-  title: 'feedback/Loader',
-  component: Loader,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  argTypes: {
-    loading: { control: 'boolean' },
-  },
-
-  args: {
-
-    // primary: false,
-    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-    // onClick: fn(),
-  },
-} satisfies Meta<typeof Loader>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-
-export const LoadingState: Story = {
-    args: {
-      loading: true,
-    },
-  };

package/src/stories/layout/footer.stories.ts

@@ -1,63 +0,0 @@
-import Footer from '../../components/layout/footer.vue'; // Adjust the path as per your setup
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Layout/Footer',
-  component: Footer,
-  tags: ['autodocs'], // Include autodocs tag
-  argTypes: {
-    items: {
-      control: 'object',
-      description: 'List of footer navigation sections with items.',
-    },
-  },
-} as Meta<typeof Footer>;
-
-const Template: StoryFn<typeof Footer> = (args) => ({
-  components: { Footer },
-  setup() {
-    return { args };
-  },
-  template: `
-    <Footer v-bind="args">
-      <template #default>
-        <div class="text-center mt-10">Custom footer content here</div>
-      </template>
-    </Footer>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  items: [
-    {
-      title: 'Company',
-      items: [
-        { text: 'About Us', link: '/about-us', enabled: true },
-        { text: 'Careers', link: '/careers', enabled: true },
-        { text: 'Contact', link: '/contact', enabled: false }, // Disabled link
-      ],
-    },
-    {
-      title: 'Support',
-      items: [
-        { text: 'FAQ', link: '/faq', enabled: true },
-        { text: 'Help Center', link: '/help', enabled: true },
-      ],
-    },
-    {
-      title: 'Social',
-      items: [
-        { text: 'Facebook', link: '/facebook', enabled: true },
-        { text: 'Twitter', link: '/twitter', enabled: true },
-      ],
-    },
-  ],
-};
-Default.parameters = {
-  docs: {
-    description: {
-      component: 'A footer component that supports multiple navigation sections and customizable content.',
-    },
-  },
-};

package/src/style.css

@@ -1,57 +0,0 @@
-@import "tailwindcss";
-@plugin "daisyui";
-
-/* theme in preperation of daisyUI 5 */
-@plugin "daisyui/theme" {
-    name: "reserveren";
-    default: true;
-    prefersdark: false;
-    color-scheme: "light";
-    --color-base-100: #f5f8ff;
-    --color-base-200: oklch(96% 0.018 272.314);
-    --color-base-300: oklch(95% 0.026 236.824);
-    --color-base-content: oklch(29% 0.066 243.157);
-    --color-primary: oklch(70% 0.165 254.624);
-    --color-primary-content: oklch(28% 0.091 267.935);
-    --color-secondary: #001a57;
-    --color-secondary-content: oklch(93% 0.032 255.585);
-    --color-accent: #2667ff;
-    --color-accent-content: oklch(97% 0.014 254.604);
-    --color-neutral: oklch(86% 0.022 252.894);
-    --color-neutral-content: oklch(39% 0.09 240.876);
-    --color-info: oklch(78% 0.154 211.53);
-    --color-info-content: oklch(30% 0.056 229.695);
-    --color-success: oklch(87% 0.15 154.449);
-    --color-success-content: oklch(27% 0.046 192.524);
-    --color-warning: oklch(92% 0.12 95.746);
-    --color-warning-content: oklch(27% 0.077 45.635);
-    --color-error: oklch(70% 0.191 22.216);
-    --color-error-content: oklch(28% 0.109 3.907);
-    --radius-selector: 0rem;
-    --radius-field: 0rem;
-    --radius-box: 0rem;
-    --size-selector: 0.21875rem;
-    --size-field: 0.1875rem;
-    --border: 1px;
-    --depth: 1;
-    --noise: 1;
-  }
-  
-
-/* 
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults. */
-
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/storybook-static/assets/Button.stories-B5Gg7Ski.js

@@ -1,6 +0,0 @@
-import{d as y,c as a,e as s,f as b,g,n as h,o,j as v}from"./vue.esm-bundler-C-YazFc_.js";const w={key:0,class:"loading loading-spinner"},i=y({__name:"ButtonComponent",props:{outlined:{type:Boolean,default:!1},active:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},type:{},size:{},shape:{}},setup(m){const e=m,p=a(()=>{switch(e.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""}}),d=a(()=>{switch(e.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"}}),f=a(()=>{switch(e.shape){case"square":return"btn-square";case"circle":return"btn-circle";default:return""}});return(t,r)=>(o(),s("button",{class:h(["btn",{"btn-outline":e.outlined},{"btn-active":e.active},d.value,p.value,f.value])},[t.loading?(o(),s("span",w)):b("",!0),g(t.$slots,"default",{},()=>[r[0]||(r[0]=v("Submit"))])],2))}});i.__docgenInfo={exportName:"default",displayName:"ButtonComponent",description:"",tags:{},props:[{name:"outlined",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"active",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"loading",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"type",required:!1,type:{name:"union",elements:[{name:'"neutral"'},{name:'"primary"'},{name:'"secondary"'},{name:'"accent"'},{name:'"ghost"'},{name:'"link"'},{name:'"info"'},{name:'"success"'},{name:'"warning"'},{name:'"error"'}]}},{name:"size",required:!1,type:{name:"string"}},{name:"shape",required:!1,type:{name:"union",elements:[{name:'"square"'},{name:'"circle"'}]}}],slots:[{name:"default"}],sourceFiles:["/home/runner/work/manolis-ui/manolis-ui/src/components/actions/ButtonComponent.vue"]};const q={title:"Actions/Buttons",component:i,parameters:{slots:{default:"Button"}},tags:["autodocs"],argTypes:{outlined:{control:"boolean"},active:{control:"boolean"},loading:{control:"boolean"},size:{control:"select",options:["wide","tiny","small","large"]},shape:{control:"select",options:["square","circle"]},type:{control:"select",options:["neutral","primary","secondary","accent","ghost","link","info","success","warning","error"]}},args:{}},n={args:{type:"primary",default:"Button"}};var l,u,c;n.parameters={...n.parameters,docs:{...(l=n.parameters)==null?void 0:l.docs,source:{originalSource:`{
-  args: {
-    type: 'primary',
-    default: 'Button'
-  }
-}`,...(c=(u=n.parameters)==null?void 0:u.docs)==null?void 0:c.source}}};const k=["Primary"];export{n as Primary,k as __namedExportsOrder,q as default};