sprintify-ui 0.10.63 → 0.10.65

package/src/components/BaseCard.stories.js

@@ -1,63 +1,63 @@
-import BaseCard from "./BaseCard.vue";
-import BaseCardRow from "./BaseCardRow.vue";
-
-export default {
-  title: "Layout/BaseCard",
-  component: BaseCard,
-  argTypes: {},
-};
-
-const Template = (args) => ({
-  components: { BaseCard, BaseCardRow },
-  setup() {
-    return { args };
-  },
-  template: `
-  <div class="bg-slate-100 p-5">
-    <BaseCard class="mb-3">
-      Content (no padding)
-    </BaseCard>
-
-    <BaseCard class="mb-3">
-      <BaseCardRow>
-        Content (with padding)
-      </BaseCardRow>
-    </BaseCard>
-
-    <BaseCard class="mb-3">
-      <BaseCardRow>
-        Row 1
-      </BaseCardRow>
-      <BaseCardRow>
-        Row 2
-      </BaseCardRow>
-    </BaseCard>
-
-    <BaseCard class="mb-3">
-      <BaseCardRow size="xs">
-        Row (xs)
-      </BaseCardRow>
-      <BaseCardRow size="sm">
-        Row (sm)
-      </BaseCardRow>
-      <BaseCardRow size="base">
-        Row (base)
-      </BaseCardRow>
-      <BaseCardRow size="lg">
-        Row (lg)
-      </BaseCardRow>
-    </BaseCard>
-
-    <BaseCard :clipped="false" class="mb-3">
-      <div class="p-5 bg-slate-300">Not clipped</div>
-    </BaseCard>
-
-    <BaseCard clipped class="mb-3">
-      <div class="p-5 bg-slate-300">Clipped</div>
-    </BaseCard>
-    </div>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
+import BaseCard from "./BaseCard.vue";
+import BaseCardRow from "./BaseCardRow.vue";
+
+export default {
+  title: "Layout/BaseCard",
+  component: BaseCard,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: { BaseCard, BaseCardRow },
+  setup() {
+    return { args };
+  },
+  template: `
+  <div class="bg-slate-100 p-5">
+    <BaseCard class="mb-3">
+      Content (no padding)
+    </BaseCard>
+
+    <BaseCard class="mb-3">
+      <BaseCardRow>
+        Content (with padding)
+      </BaseCardRow>
+    </BaseCard>
+
+    <BaseCard class="mb-3">
+      <BaseCardRow>
+        Row 1
+      </BaseCardRow>
+      <BaseCardRow>
+        Row 2
+      </BaseCardRow>
+    </BaseCard>
+
+    <BaseCard class="mb-3">
+      <BaseCardRow size="xs">
+        Row (xs)
+      </BaseCardRow>
+      <BaseCardRow size="sm">
+        Row (sm)
+      </BaseCardRow>
+      <BaseCardRow size="base">
+        Row (base)
+      </BaseCardRow>
+      <BaseCardRow size="lg">
+        Row (lg)
+      </BaseCardRow>
+    </BaseCard>
+
+    <BaseCard :clipped="false" class="mb-3">
+      <div class="p-5 bg-slate-300">Not clipped</div>
+    </BaseCard>
+
+    <BaseCard clipped class="mb-3">
+      <div class="p-5 bg-slate-300">Clipped</div>
+    </BaseCard>
+    </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseCard.vue

@@ -1,49 +1,49 @@
-<template>
-  <div
-    ref="card"
-    class="ring-1 ring-black ring-opacity-10 bg-white"
-    :class="{
-      'rounded-lg shadow': width != windowWidth,
-      'relative isolate overflow-hidden': clipped,
-    }"
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { debounce } from 'lodash';
-
-defineProps({
-  clipped: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-// windowWidth should not be equal to width when the card is mounted
-const windowWidth = ref(1);
-const width = ref(0);
-const card = ref<HTMLElement | null>(null);
-
-onMounted(() => {
-  window.addEventListener('resize', onResizeDebounced);
-  onResize();
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', onResizeDebounced);
-});
-
-const onResizeDebounced = debounce(() => {
-  onResize();
-}, 200);
-
-function onResize() {
-  windowWidth.value = document.body.clientWidth;
-  if (!card.value) {
-    return;
-  }
-  width.value = (card.value as HTMLElement).offsetWidth;
-}
-</script>
+<template>
+  <div
+    ref="card"
+    class="ring-1 ring-black ring-opacity-10 bg-white"
+    :class="{
+      'rounded-lg shadow': width != windowWidth,
+      'relative isolate overflow-hidden': clipped,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { debounce } from 'lodash';
+
+defineProps({
+  clipped: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+// windowWidth should not be equal to width when the card is mounted
+const windowWidth = ref(1);
+const width = ref(0);
+const card = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+  window.addEventListener('resize', onResizeDebounced);
+  onResize();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', onResizeDebounced);
+});
+
+const onResizeDebounced = debounce(() => {
+  onResize();
+}, 200);
+
+function onResize() {
+  windowWidth.value = document.body.clientWidth;
+  if (!card.value) {
+    return;
+  }
+  width.value = (card.value as HTMLElement).offsetWidth;
+}
+</script>

package/src/components/BaseCardRow.vue

@@ -1,53 +1,53 @@
-<template>
-  <div
-    :class="classes"
-    @click="onClick"
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ClassNameValue, twMerge } from 'tailwind-merge';
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const emit = defineEmits(['click']);
-
-const onClick = (event: MouseEvent) => {
-  emit('click', event);
-};
-
-const props = withDefaults(defineProps<{
-  size?: 'xs' | 'sm' | 'base' | 'lg',
-  class?: ClassNameValue,
-}>(), {
-  size: 'base',
-  class: '',
-});
-
-const paddingClass = computed(() => {
-  if (props.size == 'xs') {
-    return 'md:p-3 p-2';
-  }
-  if (props.size == 'sm') {
-    return 'md:p-4 p-3';
-  }
-  if (props.size == 'lg') {
-    return 'md:p-8 p-6';
-  }
-  return 'md:p-6 px-4 py-5';
-});
-
-const classes = computed(() => {
-  return twMerge(
-    'border-t border-slate-300 first:border-t-0',
-    paddingClass.value,
-    props.class,
-  );
-});
-
-
-</script>
+<template>
+  <div
+    :class="classes"
+    @click="onClick"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ClassNameValue, twMerge } from 'tailwind-merge';
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const emit = defineEmits(['click']);
+
+const onClick = (event: MouseEvent) => {
+  emit('click', event);
+};
+
+const props = withDefaults(defineProps<{
+  size?: 'xs' | 'sm' | 'base' | 'lg',
+  class?: ClassNameValue,
+}>(), {
+  size: 'base',
+  class: '',
+});
+
+const paddingClass = computed(() => {
+  if (props.size == 'xs') {
+    return 'md:p-3 p-2';
+  }
+  if (props.size == 'sm') {
+    return 'md:p-4 p-3';
+  }
+  if (props.size == 'lg') {
+    return 'md:p-8 p-6';
+  }
+  return 'md:p-6 px-4 py-5';
+});
+
+const classes = computed(() => {
+  return twMerge(
+    'border-t border-slate-300 first:border-t-0',
+    paddingClass.value,
+    props.class,
+  );
+});
+
+
+</script>

package/src/components/BaseCharacterCounter.stories.js

@@ -1,30 +1,30 @@
-import BaseCharacterCounter from "./BaseCharacterCounter.vue";
-import BaseInput from "@/components/BaseInput.vue";
-
-export default {
-  title: "Data/BaseCharacterCounter",
-  component: BaseCharacterCounter,
-  args: {
-    text: "Test",
-    max: 100,
-    min: 10,
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseCharacterCounter,
-    BaseInput,
-  },
-  setup() {
-    const text = ref("bla bla");
-    return { args, text };
-  },
-  template: `
-    <BaseInput v-model="text" name="test" class="w-full mb-1"></BaseInput>
-    <BaseCharacterCounter v-bind="args" :text="text" class="text-xs text-slate-500"></BaseCharacterCounter>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
+import BaseCharacterCounter from "./BaseCharacterCounter.vue";
+import BaseInput from "@/components/BaseInput.vue";
+
+export default {
+  title: "Data/BaseCharacterCounter",
+  component: BaseCharacterCounter,
+  args: {
+    text: "Test",
+    max: 100,
+    min: 10,
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseCharacterCounter,
+    BaseInput,
+  },
+  setup() {
+    const text = ref("bla bla");
+    return { args, text };
+  },
+  template: `
+    <BaseInput v-model="text" name="test" class="w-full mb-1"></BaseInput>
+    <BaseCharacterCounter v-bind="args" :text="text" class="text-xs text-slate-500"></BaseCharacterCounter>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseCharacterCounter.vue

@@ -1,64 +1,64 @@
-<template>
-  <div>
-    <div
-      v-if="max && (!min || length >= min)"
-      :class="{
-        'text-red-600': length > max,
-      }"
-    >
-      {{ length }}/{{ max }}
-    </div>
-    <div
-      v-else-if="min && length < min"
-      class="text-red-600"
-    >
-      {{ t('sui.min_x_characters', { x: min }) }} ({{ length }}/{{ min }})
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { trim } from 'lodash';
-import { t } from '@/i18n';
-
-const props = defineProps({
-  text: {
-    required: true,
-    type: String,
-  },
-  min: {
-    default: undefined,
-    type: Number,
-  },
-  max: {
-    default: undefined,
-    type: Number,
-  },
-  trim: {
-    default: true,
-    type: Boolean,
-  },
-  removeDoubleSpaces: {
-    default: true,
-    type: Boolean,
-  },
-});
-
-const trimmedText = computed(() => {
-  let text = props.text;
-
-  if (props.trim) {
-    text = trim(props.text);
-  }
-
-  if (props.removeDoubleSpaces) {
-    text = text.replace(/ +(?= )/g, '');
-  }
-
-  return text;
-});
-
-const length = computed(() => {
-  return trimmedText.value.length;
-});
-</script>
+<template>
+  <div>
+    <div
+      v-if="max && (!min || length >= min)"
+      :class="{
+        'text-red-600': length > max,
+      }"
+    >
+      {{ length }}/{{ max }}
+    </div>
+    <div
+      v-else-if="min && length < min"
+      class="text-red-600"
+    >
+      {{ t('sui.min_x_characters', { x: min }) }} ({{ length }}/{{ min }})
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { trim } from 'lodash';
+import { t } from '@/i18n';
+
+const props = defineProps({
+  text: {
+    required: true,
+    type: String,
+  },
+  min: {
+    default: undefined,
+    type: Number,
+  },
+  max: {
+    default: undefined,
+    type: Number,
+  },
+  trim: {
+    default: true,
+    type: Boolean,
+  },
+  removeDoubleSpaces: {
+    default: true,
+    type: Boolean,
+  },
+});
+
+const trimmedText = computed(() => {
+  let text = props.text;
+
+  if (props.trim) {
+    text = trim(props.text);
+  }
+
+  if (props.removeDoubleSpaces) {
+    text = text.replace(/ +(?= )/g, '');
+  }
+
+  return text;
+});
+
+const length = computed(() => {
+  return trimmedText.value.length;
+});
+</script>