@namelivia/vue-components 4.4.5 → 4.6.0

package/package.json

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

package/src/Badge/Badge.vue

@@ -2,13 +2,9 @@
 span(class="badge")
   | {{text}}
 </template>
-<script lang="js">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: "Badge",
-  props: {
-    text: String,
-  },
+<script setup>
+defineProps({
+  text: String,
 })
 </script>
 <style scoped>

package/src/Buttons/DangerButton/DangerButton.vue

@@ -3,20 +3,12 @@ button(v-on:click="onClick" class="danger-button")
   | {{text}}
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "DangerButton",
-  props: {
-    text: String,
-  },
-  emits: ['click'],
-  methods: {
-    onClick(evt) {
-      this.$emit('click', evt);
-    },
-  },
+<script setup>
+defineProps({
+  text: String,
 });
+const emit = defineEmits(['click']);
+const onClick = (evt) => emit('click', evt);
 </script>
 
 <style scoped>

package/src/Buttons/RegularButton/RegularButton.vue

@@ -3,36 +3,33 @@ button(v-on:click="onClick" :class="cssClass" :disabled="loading")
   | {{ loading ? textWhileLoading : text }}
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "RegularButton",
-  props: {
-    text: String,
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    textWhileLoading: {
-      type: String,
-      default: '...',
-    },
-  },
-  emits: ['click'],
-  computed: {
-    cssClass: function () {
-      if (this.loading) {
-        return 'regular-button loading';
-      }
-      return 'regular-button'
-    },
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  text: String,
+  loading: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    onClick(evt) {
-      this.$emit('click', evt);
-    },
+  textWhileLoading: {
+    type: String,
+    default: '...',
   },
 });
+
+const emit = defineEmits(['click']);
+
+const cssClass = computed(() => {
+  if (props.loading) {
+    return 'regular-button loading';
+  }
+  return 'regular-button';
+});
+
+const onClick = (evt) => {
+  emit('click', evt);
+};
 </script>
 
 <style scoped>
@@ -60,4 +57,3 @@ export default defineComponent({
   background-color: var(--color-regular-disabled);
 }
 </style>
-

package/src/Buttons/ResetButton/ResetButton.vue

@@ -3,13 +3,9 @@ button(type="reset" class="reset-button")
   | {{text}}
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "ResetButton",
-  props: {
-    text: String,
-  },
+<script setup>
+defineProps({
+  text: String,
 });
 </script>
 

package/src/Buttons/SecondaryButton/SecondaryButton.vue

@@ -3,20 +3,12 @@ button(v-on:click="onClick" class="secondary-button")
   | {{text}}
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "SecondaryButton",
-  props: {
-    text: String,
-  },
-  emits: ['click'],
-  methods: {
-    onClick(evt) {
-      this.$emit('click', evt);
-    },
-  },
+<script setup>
+defineProps({
+  text: String,
 });
+const emit = defineEmits(['click']);
+const onClick = (evt) => emit('click', evt);
 </script>
 
 <style scoped>

package/src/Buttons/SubmitButton/SubmitButton.vue

@@ -7,18 +7,10 @@ button(
   | {{text}}
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "SubmitButton",
-  props: {
-    text: {
-        type: String,
-    },
-    disabled: {
-        type: Boolean,
-    },
-  },
+<script setup>
+defineProps({
+  text: String,
+  disabled: Boolean,
 });
 </script>
 

package/src/Card/Card.vue

@@ -5,26 +5,20 @@ div(v-if="!dismissed" class="card-container")
       card-body(:title="title")
         slot
 </template>
-<script lang="js">
-import { default as CardImage } from './CardImage.vue'
-import { default as CardBody } from './CardBody.vue'
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: "Card",
-  props: {
-    image: String,
-    title: String,
-    dismissed: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {
-    CardImage,
-    CardBody,
+<script setup>
+import CardImage from './CardImage.vue'
+import CardBody from './CardBody.vue'
+
+defineProps({
+  image: String,
+  title: String,
+  dismissed: {
+    type: Boolean,
+    default: false,
   },
-  emits: ['width']
-})
+});
+
+defineEmits(['width']);
 </script>
 <style scoped>
 .card-container {

package/src/Card/CardBody.vue

@@ -5,14 +5,10 @@ div(class="card-body")
   p(class="card-text")
     slot
 </template>
-<script lang="js">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: "CardBody",
-  props: {
-    title: String,
-  },
-})
+<script setup>
+defineProps({
+  title: String,
+});
 </script>
 <style scoped>
 .card-body {
@@ -30,4 +26,3 @@ export default defineComponent({
   font-size: var(--font-size-base);
 }
 </style>
-

package/src/Card/CardImage.vue

@@ -2,32 +2,25 @@
 img(:src="src" :alt="alt" ref="image")
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: "CardImage",
-  props: {
-    src: String,
-    alt: String,
-  },
-  data: function () {
-    return {
-      imageWidth: 0,
-    }
-  },
-  methods: {
-    calculateWidth() {
-      return this.$refs.image.clientWidth
-    },
-  },
-  emits: ['width'],
-  mounted: function () {
-    this.$emit('width', this.calculateWidth())
-  },
-})
+<script setup>
+import { ref, onMounted } from 'vue';
+
+defineProps({
+  src: String,
+  alt: String,
+});
+
+const emit = defineEmits(['width']);
+const image = ref(null);
+
+const calculateWidth = () => image.value.clientWidth;
+
+onMounted(() => {
+  emit('width', calculateWidth());
+});
 </script>
 <style scoped>
     img {
       width: 100%;
     }
-</style
+</style>

package/src/CardGrid/CardGrid.vue

@@ -2,11 +2,8 @@
 div(class="card-grid")
   slot
 </template>
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "CardGrid"
-});
+<script setup>
+// No logic needed
 </script>
 <style scoped>
 .card-grid {

package/src/Container/Container.vue

@@ -3,11 +3,8 @@ div(class="container")
   slot
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "Container"
-});
+<script setup>
+// No logic needed
 </script>
 
 <style scoped>

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,16 @@
+<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 setup>
+defineProps({
+  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,16 @@
+<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 setup>
+defineProps({
+  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,30 @@
+<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 setup>
+defineProps({
+  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,16 @@
+<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 setup>
+defineProps({
+  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,16 @@
+<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 setup>
+defineProps({
+  size: {
+    type: [Number, String],
+    default: 24
+  },
+  color: {
+    type: String,
+    default: 'currentColor'
+  }
+});
+</script>