sprintify-ui 0.10.65 → 0.10.66

package/src/components/BaseCollapse.stories.js

@@ -1,168 +1,168 @@
-import { method } from "lodash";
-import BaseCollapse from "./BaseCollapse.vue";
-
-export default {
-  title: "Components/BaseCollapse",
-  component: BaseCollapse,
-  args: {},
-  argTypes: {
-    defaultOpen: {
-      control: { type: "boolean" },
-    },
-    icon: {
-      control: { type: "text" },
-    },
-    isOpenIconClass: {
-      control: { type: "text" },
-    },
-    isCloseIconClass: {
-      control: { type: "text" },
-    },
-    twIcon: {
-      control: { type: "text" },
-    },
-    twHeader: {
-      control: { type: "text" },
-    },
-    twContent: {
-      control: { type: "text" },
-    },
-    twTitle: {
-      control: { type: "text" },
-    },
-    iconPosition: {
-      control: { type: "select" },
-      options: ["left", "right"],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseCollapse },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseCollapse v-bind="args" class="mb-1">
-        <template #title>
-            <h6 class="font-semibold"> Qu'est-ce que le Lorem Ipsum? </h6>
-        </template>
-        <template #content={isOpen}>
-            <p class="p-3">
-                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
-            </p>
-        </template>
-    </BaseCollapse> 
-
-    <BaseCollapse v-bind="args" class="mb-1">
-        <template #title>
-            <h6 class="font-semibold"> Qu'est-ce que le Lorem Ipsum? </h6>
-        </template>
-        <template #content>
-            <p class="p-3">
-                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
-            </p>
-        </template>
-    </BaseCollapse> 
-
-    <BaseCollapse v-bind="args" class="mb-1">
-        <template #title>
-            <h6 class="font-semibold"> Qu'est-ce que le Lorem Ipsum? </h6>
-        </template>
-        <template #content>
-            <p class="p-3">
-                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
-            </p>
-        </template>
-    </BaseCollapse>
-    
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {
-  defaultOpen: false,
-};
-
-const CustomHeaderTemplate = (args) => ({
-  components: { BaseCollapse },
-  setup() {
-    return { args };
-  },
-  method: {
-    toggle() {
-      this.defaultOpen = !this.defaultOpen;
-    },
-  },
-  template: `
-    
-    <BaseCollapse v-bind="args" class="mb-3">
-        <template #header={toggle}>
-            <h6 class="cursor-pointer hover:text-slate-400" @click="toggle()"> Qu'est-ce que le Lorem Ipsum? </h6>
-        </template>
-        <template #content>
-            <p class="p-3">
-                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
-            </p>
-        </template>
-    </BaseCollapse>
-
-    <BaseCollapse v-bind="args" class="mb-3">
-        <template #header={toggle}>
-            <h6 class="cursor-pointer hover:text-slate-400" @click="toggle()"> Qu'est-ce que le Lorem Ipsum? </h6>
-        </template>
-        <template #content>
-            <p class="p-3">
-                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
-            </p>
-        </template>
-    </BaseCollapse>
-
-    <BaseCollapse v-bind="args" class="mb-3">
-        <template #header={toggle}>
-            <h6 class="cursor-pointer hover:text-slate-400" @click="toggle()"> Qu'est-ce que le Lorem Ipsum? </h6>
-        </template>
-        <template #content>
-            <p class="p-3">
-                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
-            </p>
-        </template>
-    </BaseCollapse>
-
-    `,
-  argTypes: {
-    defaultOpen: {
-      control: { type: "boolean" },
-    },
-    icon: {
-      control: { type: "text" },
-    },
-    isOpenIconClass: {
-      control: { type: "text" },
-    },
-    isCloseIconClass: {
-      control: { type: "text" },
-    },
-    twIcon: {
-      control: { type: "text" },
-    },
-    twHeader: {
-      control: { type: "text" },
-    },
-    twContent: {
-      control: { type: "text" },
-    },
-    twTitle: {
-      control: { type: "text" },
-    },
-    iconPosition: {
-      control: { type: "select" },
-      options: ["left", "right"],
-    },
-  },
-});
-export const CustomHeader = CustomHeaderTemplate.bind({});
-
-CustomHeader.args = {
-  defaultOpen: false,
-};
+import { method } from "lodash";
+import BaseCollapse from "./BaseCollapse.vue";
+
+export default {
+  title: "Components/BaseCollapse",
+  component: BaseCollapse,
+  args: {},
+  argTypes: {
+    defaultOpen: {
+      control: { type: "boolean" },
+    },
+    icon: {
+      control: { type: "text" },
+    },
+    isOpenIconClass: {
+      control: { type: "text" },
+    },
+    isCloseIconClass: {
+      control: { type: "text" },
+    },
+    twIcon: {
+      control: { type: "text" },
+    },
+    twHeader: {
+      control: { type: "text" },
+    },
+    twContent: {
+      control: { type: "text" },
+    },
+    twTitle: {
+      control: { type: "text" },
+    },
+    iconPosition: {
+      control: { type: "select" },
+      options: ["left", "right"],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseCollapse },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseCollapse v-bind="args" class="mb-1">
+        <template #title>
+            <h6 class="font-semibold"> Qu'est-ce que le Lorem Ipsum? </h6>
+        </template>
+        <template #content={isOpen}>
+            <p class="p-3">
+                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
+            </p>
+        </template>
+    </BaseCollapse> 
+
+    <BaseCollapse v-bind="args" class="mb-1">
+        <template #title>
+            <h6 class="font-semibold"> Qu'est-ce que le Lorem Ipsum? </h6>
+        </template>
+        <template #content>
+            <p class="p-3">
+                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
+            </p>
+        </template>
+    </BaseCollapse> 
+
+    <BaseCollapse v-bind="args" class="mb-1">
+        <template #title>
+            <h6 class="font-semibold"> Qu'est-ce que le Lorem Ipsum? </h6>
+        </template>
+        <template #content>
+            <p class="p-3">
+                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
+            </p>
+        </template>
+    </BaseCollapse>
+    
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  defaultOpen: false,
+};
+
+const CustomHeaderTemplate = (args) => ({
+  components: { BaseCollapse },
+  setup() {
+    return { args };
+  },
+  method: {
+    toggle() {
+      this.defaultOpen = !this.defaultOpen;
+    },
+  },
+  template: `
+    
+    <BaseCollapse v-bind="args" class="mb-3">
+        <template #header={toggle}>
+            <h6 class="cursor-pointer hover:text-slate-400" @click="toggle()"> Qu'est-ce que le Lorem Ipsum? </h6>
+        </template>
+        <template #content>
+            <p class="p-3">
+                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
+            </p>
+        </template>
+    </BaseCollapse>
+
+    <BaseCollapse v-bind="args" class="mb-3">
+        <template #header={toggle}>
+            <h6 class="cursor-pointer hover:text-slate-400" @click="toggle()"> Qu'est-ce que le Lorem Ipsum? </h6>
+        </template>
+        <template #content>
+            <p class="p-3">
+                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
+            </p>
+        </template>
+    </BaseCollapse>
+
+    <BaseCollapse v-bind="args" class="mb-3">
+        <template #header={toggle}>
+            <h6 class="cursor-pointer hover:text-slate-400" @click="toggle()"> Qu'est-ce que le Lorem Ipsum? </h6>
+        </template>
+        <template #content>
+            <p class="p-3">
+                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
+            </p>
+        </template>
+    </BaseCollapse>
+
+    `,
+  argTypes: {
+    defaultOpen: {
+      control: { type: "boolean" },
+    },
+    icon: {
+      control: { type: "text" },
+    },
+    isOpenIconClass: {
+      control: { type: "text" },
+    },
+    isCloseIconClass: {
+      control: { type: "text" },
+    },
+    twIcon: {
+      control: { type: "text" },
+    },
+    twHeader: {
+      control: { type: "text" },
+    },
+    twContent: {
+      control: { type: "text" },
+    },
+    twTitle: {
+      control: { type: "text" },
+    },
+    iconPosition: {
+      control: { type: "select" },
+      options: ["left", "right"],
+    },
+  },
+});
+export const CustomHeader = CustomHeaderTemplate.bind({});
+
+CustomHeader.args = {
+  defaultOpen: false,
+};

package/src/components/BaseCollapse.vue

@@ -1,98 +1,98 @@
-<template>
-  <div>
-    <div>
-      <slot
-        name="header"
-        :open="isOpen"
-        :toggle="toggle"
-      >
-        <button
-          :class="headerClass"
-          type="button"
-          @click="toggle()"
-        >
-          <BaseIcon
-            v-if="iconPosition === 'left'"
-            :class="internalIconClass"
-            :icon="icon"
-          />
-        
-          <div :class="internalTitleClass">
-            <slot
-              name="title"
-              :open="isOpen"
-            />
-          </div>
-          <BaseIcon
-            v-if="iconPosition === 'right'"
-            :class="internalIconClass"
-            :icon="icon"
-          />
-        </button>
-      </slot>
-    </div>
-  
-    <div
-      v-show="isOpen"
-      :class="internalContentClass"
-    >
-      <slot
-        name="content"
-        :open="isOpen"
-      />
-    </div>
-  </div>
-</template>
-  
-<script lang="ts" setup>
-
-import { twMerge } from 'tailwind-merge';
-
-const internalIconClass = computed(() => {
-  const base = "w-6 h-6 flex items-center justify-center transition duration-300 ease-in-out transform cursor-pointer";
-
-  return twMerge(base, props.twIcon, isOpen.value ? props.isOpenIconClass : props.isCloseIconClass,);
-});
-
-const headerClass = computed(() => {
-  return twMerge('flex items-center w-full space-x-1', props.twHeader);
-});
-
-const internalContentClass = computed(() => {
-  return twMerge('transition duration-300 ease-in-out transform', props.twContent);
-});
-
-const internalTitleClass = computed(() => {
-  return twMerge(props.twTitle, '');
-});
-
-function toggle() {
-  isOpen.value = !isOpen.value;
-}
-
-
-const props = withDefaults(defineProps<{
-  defaultOpen?: boolean;
-  icon?: string;
-  iconPosition?: 'left' | 'right';
-  isOpenIconClass?: string;
-  isCloseIconClass?: string;
-  twIcon?: string | string[] | null;
-  twHeader?: string | string[] | null;
-  twTitle?: string | string[] | null;
-  twContent?: string | string[] | null;
-}>(), {
-  defaultOpen: true,
-  icon: 'heroicons:chevron-down-16-solid',
-  iconPosition: 'left',
-  twIcon: null,
-  twHeader: null,
-  twTitle: null,
-  twContent: null,
-  isOpenIconClass: '-rotate-0',
-  isCloseIconClass: '-rotate-90',
-});
-
-const isOpen = ref(props.defaultOpen as boolean);
-
-</script>
+<template>
+  <div>
+    <div>
+      <slot
+        name="header"
+        :open="isOpen"
+        :toggle="toggle"
+      >
+        <button
+          :class="headerClass"
+          type="button"
+          @click="toggle()"
+        >
+          <BaseIcon
+            v-if="iconPosition === 'left'"
+            :class="internalIconClass"
+            :icon="icon"
+          />
+        
+          <div :class="internalTitleClass">
+            <slot
+              name="title"
+              :open="isOpen"
+            />
+          </div>
+          <BaseIcon
+            v-if="iconPosition === 'right'"
+            :class="internalIconClass"
+            :icon="icon"
+          />
+        </button>
+      </slot>
+    </div>
+  
+    <div
+      v-show="isOpen"
+      :class="internalContentClass"
+    >
+      <slot
+        name="content"
+        :open="isOpen"
+      />
+    </div>
+  </div>
+</template>
+  
+<script lang="ts" setup>
+
+import { twMerge } from 'tailwind-merge';
+
+const internalIconClass = computed(() => {
+  const base = "w-6 h-6 flex items-center justify-center transition duration-300 ease-in-out transform cursor-pointer";
+
+  return twMerge(base, props.twIcon, isOpen.value ? props.isOpenIconClass : props.isCloseIconClass,);
+});
+
+const headerClass = computed(() => {
+  return twMerge('flex items-center w-full space-x-1', props.twHeader);
+});
+
+const internalContentClass = computed(() => {
+  return twMerge('transition duration-300 ease-in-out transform', props.twContent);
+});
+
+const internalTitleClass = computed(() => {
+  return twMerge(props.twTitle, '');
+});
+
+function toggle() {
+  isOpen.value = !isOpen.value;
+}
+
+
+const props = withDefaults(defineProps<{
+  defaultOpen?: boolean;
+  icon?: string;
+  iconPosition?: 'left' | 'right';
+  isOpenIconClass?: string;
+  isCloseIconClass?: string;
+  twIcon?: string | string[] | null;
+  twHeader?: string | string[] | null;
+  twTitle?: string | string[] | null;
+  twContent?: string | string[] | null;
+}>(), {
+  defaultOpen: true,
+  icon: 'heroicons:chevron-down-16-solid',
+  iconPosition: 'left',
+  twIcon: null,
+  twHeader: null,
+  twTitle: null,
+  twContent: null,
+  isOpenIconClass: '-rotate-0',
+  isCloseIconClass: '-rotate-90',
+});
+
+const isOpen = ref(props.defaultOpen as boolean);
+
+</script>

package/src/components/BaseColor.stories.js

@@ -1,66 +1,66 @@
-import { createFieldStory, sizes } from "../../.storybook/utils";
-import BaseColor from "./BaseColor.vue";
-import ShowValue from "../../.storybook/components/ShowValue.vue";
-
-export default {
-  title: "Form/BaseColor",
-  component: BaseColor,
-  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: sizes,
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseColor, ShowValue },
-  setup() {
-    const value = ref(null);
-    return { args, value };
-  },
-  template: `
-    <BaseColor v-model="value" v-bind="args"></BaseColor>
-    <ShowValue :value="value"></ShowValue>
-  `,
-});
-
-export const Single = Template.bind({});
-Single.args = {};
-
-export const SingleRequired = Template.bind({});
-SingleRequired.args = {
-  required: true,
-};
-
-export const Multiple = Template.bind({});
-Multiple.args = {
-  multiple: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-  modelValue: "#16a34a",
-};
-
-export const Sizes = (args) => ({
-  components: { BaseColor },
-  setup() {
-    const value = ref(null);
-    return { args, sizes, value };
-  },
-  template: `
-    <div v-for="size in sizes" :key="size" class="mb-4">
-      <p class="text-xs text-slate-600 leading-tight mb-1"> {{ size }}</p>
-      <BaseColor v-bind="args" v-model="value" :size="size"></BaseColor>
-    </div>
-  `,
-});
-
-export const Field = createFieldStory({
-  component: BaseColor,
-  componentName: "BaseColor",
-  label: "Choose your favorite color",
-});
+import { createFieldStory, sizes } from "../../.storybook/utils";
+import BaseColor from "./BaseColor.vue";
+import ShowValue from "../../.storybook/components/ShowValue.vue";
+
+export default {
+  title: "Form/BaseColor",
+  component: BaseColor,
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: sizes,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseColor, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+    <BaseColor v-model="value" v-bind="args"></BaseColor>
+    <ShowValue :value="value"></ShowValue>
+  `,
+});
+
+export const Single = Template.bind({});
+Single.args = {};
+
+export const SingleRequired = Template.bind({});
+SingleRequired.args = {
+  required: true,
+};
+
+export const Multiple = Template.bind({});
+Multiple.args = {
+  multiple: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  modelValue: "#16a34a",
+};
+
+export const Sizes = (args) => ({
+  components: { BaseColor },
+  setup() {
+    const value = ref(null);
+    return { args, sizes, value };
+  },
+  template: `
+    <div v-for="size in sizes" :key="size" class="mb-4">
+      <p class="text-xs text-slate-600 leading-tight mb-1"> {{ size }}</p>
+      <BaseColor v-bind="args" v-model="value" :size="size"></BaseColor>
+    </div>
+  `,
+});
+
+export const Field = createFieldStory({
+  component: BaseColor,
+  componentName: "BaseColor",
+  label: "Choose your favorite color",
+});