@namelivia/vue-components 4.4.5 → 4.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namelivia/vue-components",
-  "version": "4.4.5",
+  "version": "4.5.1",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "peerDependencies": {

package/src/Icons/CalendarIcon/CalendarIcon.cy.js

@@ -0,0 +1,10 @@
+import CalendarIcon from './CalendarIcon.vue'
+
+describe('<CalendarIcon />', () => {
+  it('renders with default values', () => {
+    cy.mount(CalendarIcon)
+    cy.get('svg')
+      .should('be.visible')
+      .and('have.attr', 'width', '24')
+  })
+})

package/src/Icons/CalendarIcon/CalendarIcon.stories.js

@@ -0,0 +1,24 @@
+import CalendarIcon from './CalendarIcon.vue';
+
+export default {
+  title: 'Icons/CalendarIcon',
+  component: CalendarIcon,
+  argTypes: {
+    size: { control: { type: 'range', min: 12, max: 100, step: 1 } },
+    color: { control: 'color' },
+  },
+};
+
+export const Default = {
+  args: {
+    size: 24,
+    color: '#000000',
+  },
+  render: (args) => ({
+    components: { CalendarIcon },
+    setup() {
+      return { args };
+    },
+    template: '<CalendarIcon v-bind="args" />',
+  }),
+};

package/src/Icons/CalendarIcon/CalendarIcon.vue

@@ -0,0 +1,19 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon lucide-calendar"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
+</template>
+
+<script>
+export default {
+  name: 'CalendarIcon',
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    },
+    color: {
+      type: String,
+      default: 'currentColor'
+    }
+  }
+}
+</script>

package/src/Icons/CreateIcon/CreateIcon.cy.js

@@ -0,0 +1,10 @@
+import CreateIcon from './CreateIcon.vue'
+
+describe('<CreateIcon />', () => {
+  it('renders with default values', () => {
+    cy.mount(CreateIcon)
+    cy.get('svg')
+      .should('be.visible')
+      .and('have.attr', 'width', '24')
+  })
+})

package/src/Icons/CreateIcon/CreateIcon.stories.js

@@ -0,0 +1,24 @@
+import CreateIcon from './CreateIcon.vue';
+
+export default {
+  title: 'Icons/CreateIcon',
+  component: CreateIcon,
+  argTypes: {
+    size: { control: { type: 'range', min: 12, max: 100, step: 1 } },
+    color: { control: 'color' },
+  },
+};
+
+export const Default = {
+  args: {
+    size: 24,
+    color: '#000000',
+  },
+  render: (args) => ({
+    components: { CreateIcon },
+    setup() {
+      return { args };
+    },
+    template: '<CreateIcon v-bind="args" />',
+  }),
+};

package/src/Icons/CreateIcon/CreateIcon.vue

@@ -0,0 +1,19 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-plus-icon lucide-badge-plus"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><line x1="12" x2="12" y1="8" y2="16"/><line x1="8" x2="16" y1="12" y2="12"/></svg>
+</template>
+
+<script>
+export default {
+  name: 'CreateIcon',
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    },
+    color: {
+      type: String,
+      default: 'currentColor'
+    }
+  }
+}
+</script>

package/src/Icons/DropIcon/DropIcon.cy.js

@@ -0,0 +1,33 @@
+import DropIcon from './DropIcon.vue'
+
+describe('<DropIcon />', () => {
+  it('renders with default values', () => {
+    cy.mount(DropIcon)
+    cy.get('svg')
+      .should('be.visible')
+      .and('have.attr', 'width', '24')
+      .and('have.attr', 'stroke', 'currentColor')
+  })
+
+  it('renders with custom size', () => {
+    const customSize = 48
+    cy.mount(DropIcon, {
+      props: {
+        size: customSize
+      }
+    })
+    cy.get('svg')
+      .should('have.attr', 'width', customSize.toString())
+      .and('have.attr', 'height', customSize.toString())
+  })
+
+  it('renders with custom color', () => {
+    const customColor = 'rgb(255, 0, 0)'
+    cy.mount(DropIcon, {
+      props: {
+        color: customColor
+      }
+    })
+    cy.get('svg').should('have.attr', 'stroke', customColor)
+  })
+})

package/src/Icons/DropIcon/DropIcon.stories.js

@@ -0,0 +1,24 @@
+import DropIcon from './DropIcon.vue';
+
+export default {
+  title: 'Icons/DropIcon',
+  component: DropIcon,
+  argTypes: {
+    size: { control: { type: 'range', min: 12, max: 100, step: 1 } },
+    color: { control: 'color' },
+  },
+};
+
+export const Default = {
+  args: {
+    size: 24,
+    color: '#000000',
+  },
+  render: (args) => ({
+    components: { DropIcon },
+    setup() {
+      return { args };
+    },
+    template: '<DropIcon v-bind="args" />',
+  }),
+};

package/src/Icons/DropIcon/DropIcon.vue

@@ -0,0 +1,33 @@
+<template>
+    <svg 
+      xmlns="http://www.w3.org/2000/svg" 
+      :width="size" 
+      :height="size" 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      :stroke="color" 
+      stroke-width="2" 
+      stroke-linecap="round" 
+      stroke-linejoin="round" 
+      class="lucide lucide-droplets-icon lucide-droplets"
+    >
+      <path d="M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z"/>
+      <path d="M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97"/>
+    </svg>
+</template>
+
+<script>
+export default {
+  name: 'DropIcon',
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    },
+    color: {
+      type: String,
+      default: 'currentColor'
+    }
+  }
+}
+</script>

package/src/Icons/SaveIcon/SaveIcon.cy.js

@@ -0,0 +1,10 @@
+import SaveIcon from './SaveIcon.vue'
+
+describe('<SaveIcon />', () => {
+  it('renders with default values', () => {
+    cy.mount(SaveIcon)
+    cy.get('svg')
+      .should('be.visible')
+      .and('have.attr', 'width', '24')
+  })
+})

package/src/Icons/SaveIcon/SaveIcon.stories.js

@@ -0,0 +1,24 @@
+import SaveIcon from './SaveIcon.vue';
+
+export default {
+  title: 'Icons/SaveIcon',
+  component: SaveIcon,
+  argTypes: {
+    size: { control: { type: 'range', min: 12, max: 100, step: 1 } },
+    color: { control: 'color' },
+  },
+};
+
+export const Default = {
+  args: {
+    size: 24,
+    color: '#000000',
+  },
+  render: (args) => ({
+    components: { SaveIcon },
+    setup() {
+      return { args };
+    },
+    template: '<SaveIcon v-bind="args" />',
+  }),
+};

package/src/Icons/SaveIcon/SaveIcon.vue

@@ -0,0 +1,19 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-save-icon lucide-save"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/><path d="M7 3v4a1 1 0 0 0 1 1h7"/></svg>
+</template>
+
+<script>
+export default {
+  name: 'SaveIcon',
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    },
+    color: {
+      type: String,
+      default: 'currentColor'
+    }
+  }
+}
+</script>

package/src/Icons/SkullIcon/SkullIcon.cy.js

@@ -0,0 +1,10 @@
+import SkullIcon from './SkullIcon.vue'
+
+describe('<SkullIcon />', () => {
+  it('renders with default values', () => {
+    cy.mount(SkullIcon)
+    cy.get('svg')
+      .should('be.visible')
+      .and('have.attr', 'width', '24')
+  })
+})

package/src/Icons/SkullIcon/SkullIcon.stories.js

@@ -0,0 +1,24 @@
+import SkullIcon from './SkullIcon.vue';
+
+export default {
+  title: 'Icons/SkullIcon',
+  component: SkullIcon,
+  argTypes: {
+    size: { control: { type: 'range', min: 12, max: 100, step: 1 } },
+    color: { control: 'color' },
+  },
+};
+
+export const Default = {
+  args: {
+    size: 24,
+    color: '#000000',
+  },
+  render: (args) => ({
+    components: { SkullIcon },
+    setup() {
+      return { args };
+    },
+    template: '<SkullIcon v-bind="args" />',
+  }),
+};

package/src/Icons/SkullIcon/SkullIcon.vue

@@ -0,0 +1,19 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-skull-icon lucide-skull"><path d="m12.5 17-.5-1-.5 1h1z"/><path d="M15 22a1 1 0 0 0 1-1v-1a2 2 0 0 0 1.56-3.25 8 8 0 1 0-11.12 0A2 2 0 0 0 8 20v1a1 1 0 0 0 1 1z"/><circle cx="15" cy="12" r="1"/><circle cx="9" cy="12" r="1"/></svg>
+</template>
+
+<script>
+export default {
+  name: 'SkullIcon',
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    },
+    color: {
+      type: String,
+      default: 'currentColor'
+    }
+  }
+}
+</script>

package/src/index.js

@@ -24,3 +24,8 @@ export { default as NumberInput } from './Inputs/NumberInput/NumberInput.vue'
 export { default as ImageInput } from './Inputs/ImageInput/ImageInput.vue'
 export { default as ResizeImageUpload } from './Inputs/ResizeImageUpload/ResizeImageUpload.vue'
 export { default as Selector } from './Inputs/Selector/Selector.vue'
+export { default as DropIcon } from './Icons/DropIcon/DropIcon.vue'
+export { default as SkullIcon } from './Icons/SkullIcon/SkullIcon.vue'
+export { default as CalendarIcon } from './Icons/CalendarIcon/CalendarIcon.vue'
+export { default as SaveIcon } from './Icons/SaveIcon/SaveIcon.vue'
+export { default as CreateIcon } from './Icons/CreateIcon/CreateIcon.vue'