sprintify-ui 0.4.3 → 0.4.5

package/src/components/BaseActionItem.vue

@@ -1,68 +1,68 @@
-<template>
-  <RouterLink
-    v-if="to"
-    v-slot="{ isActive, href: slotHref, navigate }"
-    custom
-    :to="to"
-  >
-    <a
-      :active="isActive"
-      :href="slotHref"
-      :class="props.class"
-      :aria-current="isActive ? 'page' : undefined"
-      @click.prevent="onClick(navigate)"
-    >
-      <slot :active="isActive" />
-    </a>
-  </RouterLink>
-  <button
-    v-else-if="action"
-    type="button"
-    class="text-left"
-    :class="props.class"
-    @click="onClick(action)"
-  >
-    <slot :active="false" />
-  </button>
-  <a
-    v-else-if="href"
-    :href="href"
-    :class="props.class"
-    @click="onClick()"
-  >
-    <slot :active="false" />
-  </a>
-</template>
-
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-};
-</script>
-
-<script setup lang="ts">
-import { RouteLocationRaw } from 'vue-router';
-
-const props = defineProps<{
-  to?: RouteLocationRaw;
-  href?: string;
-  action?: (() => Promise<void>) | (() => void);
-  class?: string | string[] | null;
-}>();
-
-const closeMenu = inject('closeMenu', () => {
-  return;
-}) as () => void;
-
-const emit = defineEmits(['click']);
-
-type asyncFunc = () => Promise<void>;
-
-async function onClick(func: asyncFunc | null = null) {
-  if (func) {
-    await func();
-  }
-  emit('click');
-  closeMenu();
-}
-</script>
+<template>
+  <RouterLink
+    v-if="to"
+    v-slot="{ isActive, href: slotHref, navigate }"
+    custom
+    :to="to"
+  >
+    <a
+      :active="isActive"
+      :href="slotHref"
+      :class="props.class"
+      :aria-current="isActive ? 'page' : undefined"
+      @click.prevent="onClick(navigate)"
+    >
+      <slot :active="isActive" />
+    </a>
+  </RouterLink>
+  <button
+    v-else-if="action"
+    type="button"
+    class="text-left"
+    :class="props.class"
+    @click="onClick(action)"
+  >
+    <slot :active="false" />
+  </button>
+  <a
+    v-else-if="href"
+    :href="href"
+    :class="props.class"
+    @click="onClick()"
+  >
+    <slot :active="false" />
+  </a>
+</template>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<script setup lang="ts">
+import { RouteLocationRaw } from 'vue-router';
+
+const props = defineProps<{
+  to?: RouteLocationRaw;
+  href?: string;
+  action?: (() => Promise<void>) | (() => void);
+  class?: string | string[] | null;
+}>();
+
+const closeMenu = inject('closeMenu', () => {
+  return;
+}) as () => void;
+
+const emit = defineEmits(['click']);
+
+type asyncFunc = () => Promise<void>;
+
+async function onClick(func: asyncFunc | null = null) {
+  if (func) {
+    await func();
+  }
+  emit('click');
+  closeMenu();
+}
+</script>

package/src/components/BaseActionItemButton.vue

@@ -1,77 +1,77 @@
-<template>
-  <BaseActionItem
-    :to="action.to"
-    :href="action.href"
-    :action="action.action"
-    :class="classes"
-    class="flex items-center justify-center"
-  >
-    <BaseIcon
-      v-if="action.icon"
-      :icon="action.icon"
-      :class="iconClasses"
-      class="mr-2"
-    />
-    <span
-      :class="[action.icon ? 'pr-1' : '']"
-    >{{ action.label }}</span>
-  </BaseActionItem>
-</template>
-
-<script lang="ts" setup>
-import { ActionItem } from '@/types';
-import { BaseIcon } from '..';
-import BaseActionItem from './BaseActionItem.vue';
-
-const props = withDefaults(
-  defineProps<{
-    action: ActionItem;
-    size: 'sm' | 'md' | 'lg';
-  }>(),
-  {
-    size: 'md',
-  }
-);
-
-const classes = computed(() => {
-  const classList = ['btn'];
-
-  if (props.action.color == 'primary') {
-    classList.push('btn-primary');
-  } else if (props.action.color == 'secondary') {
-    classList.push('btn-secondary-outline');
-  } else if (props.action.color == 'danger') {
-    classList.push('btn-danger');
-  } else if (props.action.color == 'warning') {
-    classList.push('btn-warning');
-  } else if (props.action.color == 'success') {
-    classList.push('btn-success');
-  } else if (props.action.color == 'light') {
-    classList.push('');
-  } else if (props.action.color == 'dark') {
-    classList.push('btn-black');
-  }
-
-  if (props.size == 'sm') {
-    classList.push('btn-sm');
-  } else if (props.size == 'lg') {
-    classList.push('btn-lg');
-  }
-
-  return classList;
-});
-
-const iconClasses = computed(() => {
-  const classList = [];
-
-  if (props.size == 'sm') {
-    classList.push('h-4 w-4');
-  } else if (props.size == 'lg') {
-    classList.push('h-6 w-6');
-  } else {
-    classList.push('h-5 w-5');
-  }
-
-  return classList;
-});
-</script>
+<template>
+  <BaseActionItem
+    :to="action.to"
+    :href="action.href"
+    :action="action.action"
+    :class="classes"
+    class="flex items-center justify-center"
+  >
+    <BaseIcon
+      v-if="action.icon"
+      :icon="action.icon"
+      :class="iconClasses"
+      class="mr-2"
+    />
+    <span
+      :class="[action.icon ? 'pr-1' : '']"
+    >{{ action.label }}</span>
+  </BaseActionItem>
+</template>
+
+<script lang="ts" setup>
+import { ActionItem } from '@/types';
+import { BaseIcon } from '..';
+import BaseActionItem from './BaseActionItem.vue';
+
+const props = withDefaults(
+  defineProps<{
+    action: ActionItem;
+    size: 'sm' | 'md' | 'lg';
+  }>(),
+  {
+    size: 'md',
+  }
+);
+
+const classes = computed(() => {
+  const classList = ['btn'];
+
+  if (props.action.color == 'primary') {
+    classList.push('btn-primary');
+  } else if (props.action.color == 'secondary') {
+    classList.push('btn-secondary-outline');
+  } else if (props.action.color == 'danger') {
+    classList.push('btn-danger');
+  } else if (props.action.color == 'warning') {
+    classList.push('btn-warning');
+  } else if (props.action.color == 'success') {
+    classList.push('btn-success');
+  } else if (props.action.color == 'light') {
+    classList.push('');
+  } else if (props.action.color == 'dark') {
+    classList.push('btn-black');
+  }
+
+  if (props.size == 'sm') {
+    classList.push('btn-sm');
+  } else if (props.size == 'lg') {
+    classList.push('btn-lg');
+  }
+
+  return classList;
+});
+
+const iconClasses = computed(() => {
+  const classList = [];
+
+  if (props.size == 'sm') {
+    classList.push('h-4 w-4');
+  } else if (props.size == 'lg') {
+    classList.push('h-6 w-6');
+  } else {
+    classList.push('h-5 w-5');
+  }
+
+  return classList;
+});
+</script>

package/src/components/BaseAddressForm.stories.js

@@ -1,103 +1,103 @@
-import BaseAddressForm from './BaseAddressForm.vue';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
-
-export default {
-  title: 'Form/BaseAddressForm',
-  component: BaseAddressForm,
-  argTypes: {},
-  args: {
-    countries: [
-      { name: 'United States', id: 'us' },
-      { name: 'Canada', id: 'ca' },
-      { name: 'Mexico', id: 'mx' },
-    ],
-    regions: [
-      { name: 'Alabama', id: 'us-al', country_id: 'us' },
-      { name: 'Alaska', id: 'us-ak', country_id: 'us' },
-      { name: 'Arizona', id: 'us-az', country_id: 'us' },
-      { name: 'Alberta', id: 'ca-ab', country_id: 'ca' },
-      { name: 'British Columbia', id: 'ca-bc', country_id: 'ca' },
-      { name: 'Manitoba', id: 'ca-mb', country_id: 'ca' },
-      { name: 'Nova Scotia', id: 'ca-ns', country_id: 'ca' },
-      { name: 'Ontario', id: 'ca-on', country_id: 'ca' },
-      { name: 'Prince Edward Island', id: 'ca-pe', country_id: 'ca' },
-      { name: 'Quebec', id: 'ca-qc', country_id: 'ca' },
-      { name: 'Saskatchewan', id: 'ca-sk', country_id: 'ca' },
-      { name: 'Northwest Territories', id: 'ca-nt', country_id: 'ca' },
-    ],
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseAddressForm, ShowValue },
-  setup() {
-    const form = ref({
-      shipping_address: {
-        address_1: '333 rue Sherbrooke Est',
-        address_2: 'Suite 100',
-        city: 'Montreal',
-        country: 'ca',
-        region: 'qc',
-        postal_code: 'H2X 4E3',
-      },
-    });
-    return { args, form };
-  },
-  template: `
-    <BaseAddressForm v-model="form.shipping_address" prefix="shipping_address" v-bind="args"></BaseAddressForm>
-    <ShowValue :value="form" />
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-const DefaultCountryTemplate = (args) => ({
-  components: { BaseAddressForm, ShowValue },
-  setup() {
-    const form = ref({
-      shipping_address: {
-        country: 'ca',
-      },
-    });
-    return { args, form };
-  },
-  template: `
-    <BaseAddressForm v-model="form.shipping_address" prefix="shipping_address" v-bind="args"></BaseAddressForm>
-    <ShowValue :value="form" />
-  `,
-});
-
-export const DefaultCountry = DefaultCountryTemplate.bind({});
-DefaultCountry.args = {};
-
-const DefaultCountryAndRegionTemplate = (args) => ({
-  components: { BaseAddressForm, ShowValue },
-  setup() {
-    const form = ref({
-      shipping_address: {
-        country: 'ca',
-        region: 'ca-qc',
-      },
-    });
-
-    setTimeout(() => {
-      form.value.shipping_address.country = 'us';
-    }, 2000);
-
-    return { args, form };
-  },
-  template: `
-    <BaseAddressForm v-model="form.shipping_address" prefix="shipping_address" v-bind="args"></BaseAddressForm>
-    <ShowValue :value="form" />
-  `,
-});
-
-export const DefaultCountryAndRegion = DefaultCountryAndRegionTemplate.bind({});
-DefaultCountryAndRegion.args = {};
-
-export const RestrictCountry = DefaultCountryAndRegionTemplate.bind({});
-
-RestrictCountry.args = {
-  restrictCountry: true,
-};
+import BaseAddressForm from './BaseAddressForm.vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+
+export default {
+  title: 'Form/BaseAddressForm',
+  component: BaseAddressForm,
+  argTypes: {},
+  args: {
+    countries: [
+      { name: 'United States', id: 'us' },
+      { name: 'Canada', id: 'ca' },
+      { name: 'Mexico', id: 'mx' },
+    ],
+    regions: [
+      { name: 'Alabama', id: 'us-al', country_id: 'us' },
+      { name: 'Alaska', id: 'us-ak', country_id: 'us' },
+      { name: 'Arizona', id: 'us-az', country_id: 'us' },
+      { name: 'Alberta', id: 'ca-ab', country_id: 'ca' },
+      { name: 'British Columbia', id: 'ca-bc', country_id: 'ca' },
+      { name: 'Manitoba', id: 'ca-mb', country_id: 'ca' },
+      { name: 'Nova Scotia', id: 'ca-ns', country_id: 'ca' },
+      { name: 'Ontario', id: 'ca-on', country_id: 'ca' },
+      { name: 'Prince Edward Island', id: 'ca-pe', country_id: 'ca' },
+      { name: 'Quebec', id: 'ca-qc', country_id: 'ca' },
+      { name: 'Saskatchewan', id: 'ca-sk', country_id: 'ca' },
+      { name: 'Northwest Territories', id: 'ca-nt', country_id: 'ca' },
+    ],
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseAddressForm, ShowValue },
+  setup() {
+    const form = ref({
+      shipping_address: {
+        address_1: '333 rue Sherbrooke Est',
+        address_2: 'Suite 100',
+        city: 'Montreal',
+        country: 'ca',
+        region: 'qc',
+        postal_code: 'H2X 4E3',
+      },
+    });
+    return { args, form };
+  },
+  template: `
+    <BaseAddressForm v-model="form.shipping_address" prefix="shipping_address" v-bind="args"></BaseAddressForm>
+    <ShowValue :value="form" />
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+const DefaultCountryTemplate = (args) => ({
+  components: { BaseAddressForm, ShowValue },
+  setup() {
+    const form = ref({
+      shipping_address: {
+        country: 'ca',
+      },
+    });
+    return { args, form };
+  },
+  template: `
+    <BaseAddressForm v-model="form.shipping_address" prefix="shipping_address" v-bind="args"></BaseAddressForm>
+    <ShowValue :value="form" />
+  `,
+});
+
+export const DefaultCountry = DefaultCountryTemplate.bind({});
+DefaultCountry.args = {};
+
+const DefaultCountryAndRegionTemplate = (args) => ({
+  components: { BaseAddressForm, ShowValue },
+  setup() {
+    const form = ref({
+      shipping_address: {
+        country: 'ca',
+        region: 'ca-qc',
+      },
+    });
+
+    setTimeout(() => {
+      form.value.shipping_address.country = 'us';
+    }, 2000);
+
+    return { args, form };
+  },
+  template: `
+    <BaseAddressForm v-model="form.shipping_address" prefix="shipping_address" v-bind="args"></BaseAddressForm>
+    <ShowValue :value="form" />
+  `,
+});
+
+export const DefaultCountryAndRegion = DefaultCountryAndRegionTemplate.bind({});
+DefaultCountryAndRegion.args = {};
+
+export const RestrictCountry = DefaultCountryAndRegionTemplate.bind({});
+
+RestrictCountry.args = {
+  restrictCountry: true,
+};