sprintify-ui 0.0.8 → 0.0.9

package/dist/tailwindcss/index.js

@@ -0,0 +1,46 @@
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(
+  function () {
+    //
+  },
+  {
+    theme: {
+      zIndex: {
+        status: '20',
+        menu: '30',
+        modal: '40',
+        notifications: '50',
+        loading: '100',
+      },
+      animation: {
+        shake: 'shake 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both',
+        shimmer: 'shimmer 2s infinite both',
+      },
+      keyframes: {
+        shimmer: {
+          '100%': {
+            transform: 'translateX(100%)',
+          },
+        },
+        shake: {
+          '0%, 100%': {
+            transform: 'translateX(0)',
+          },
+          '10%, 30%, 50%, 70%': {
+            transform: 'translateX(-10px)',
+          },
+          '20%, 40%, 60%': {
+            transform: 'translateX(10px)',
+          },
+          '80%': {
+            transform: 'translateX(8px)',
+          },
+          '90%': {
+            transform: 'translateX(-8px)',
+          },
+        },
+      },
+    },
+  }
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "docs:dev": "vitepress dev docs",
@@ -43,7 +43,6 @@
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.8",
     "@types/luxon": "^3.1.0",
-    "@types/node": "^17.0.45",
     "@types/object-hash": "^2.2.1",
     "@types/pikaday": "^1.7.6",
     "@types/qs": "^6.9.7",
@@ -95,6 +94,7 @@
     ".": {
       "import": "./dist/sprintify-ui.es.js"
     },
-    "./dist/style.css": "./dist/style.css"
+    "./dist/style.css": "./dist/style.css",
+    "./tailwindcss": "./dist/tailwindcss/index.js"
   }
 }

package/src/components/BaseAutocomplete.stories.js

@@ -7,7 +7,6 @@ export default {
   args: {
     labelKey: 'label',
     valueKey: 'value',
-    inputClass: 'w-full border-slate-300',
     options: [
       { label: 'Dark Vader', value: 'dark_vader' },
       { label: 'Darth Maul', value: 'darth_maul' },

package/src/components/BaseAutocompleteFetch.stories.js

@@ -8,7 +8,6 @@ export default {
     url: 'https://effettandem.com/api/content/articles',
     labelKey: 'title',
     valueKey: 'id',
-    inputClass: 'w-full border-slate-300',
     disabled: false,
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],

package/src/components/BaseBelongsTo.stories.js

@@ -7,7 +7,6 @@ export default {
   args: {
     url: 'https://effettandem.com/api/content/articles',
     field: 'title',
-    inputClass: 'w-full border-slate-300',
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };

package/src/components/BaseDatePicker.stories.js

@@ -21,33 +21,28 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 Demo.args = {
   modelValue: '2023-01-01',
-  inputClass: 'border-slate-300',
 };
 
 export const YearRange = Template.bind({});
 YearRange.args = {
   modelValue: '1980-11-16',
-  inputClass: 'border-slate-300',
   yearRange: [1920, 2020],
 };
 
 export const MinDate = Template.bind({});
 MinDate.args = {
   modelValue: '2022-11-16',
-  inputClass: 'border-slate-300',
   minDate: DateTime.fromISO('2022-11-10').toJSDate(),
 };
 
 export const MaxDate = Template.bind({});
 MaxDate.args = {
   modelValue: '2022-11-16',
-  inputClass: 'border-slate-300',
   maxDate: DateTime.fromISO('2022-11-20').toJSDate(),
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
   modelValue: '2022-11-16',
-  inputClass: 'border-slate-300',
   disabled: true,
 };

package/src/components/BaseDateSelect.stories.js

@@ -0,0 +1,41 @@
+import BaseDateSelect from './BaseDateSelect.vue';
+
+export default {
+  title: 'Form/BaseDateSelect',
+  component: BaseDateSelect,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: { BaseDateSelect },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseDateSelect v-bind="args">
+    </BaseDateSelect>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  modelValue: '2021-01-01',
+};
+
+export const MinYear = Template.bind({});
+MinYear.args = {
+  modelValue: '2022-11-16',
+  minYear: 1980,
+};
+
+export const MaxYear = Template.bind({});
+MaxYear.args = {
+  modelValue: '2002-11-16',
+  maxYear: 2010,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: '2022-11-16',
+  disabled: true,
+};

package/src/components/BaseDateSelect.vue

@@ -80,7 +80,7 @@
     <button
       type="button"
       :disabled="disabled"
-      class="mt-1 appearance-none border-transparent bg-transparent text-sm text-slate-700 underline outline-none"
+      class="mt-1 appearance-none border-transparent bg-transparent text-sm text-slate-700 underline outline-none disabled:cursor-not-allowed disabled:opacity-50"
       @click="clear()"
     >
       <span>{{ $t('sui.clear') }}</span>

package/src/components/BaseDescriptionList.stories.js

@@ -0,0 +1,35 @@
+import BaseBadge from './BaseBadge.vue';
+import BaseDescriptionList from './BaseDescriptionList.vue';
+import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
+
+export default {
+  title: 'Components/BaseDescriptionList',
+  component: BaseDescriptionList,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: { BaseDescriptionList, BaseDescriptionListItem, BaseBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseDescriptionList v-bind="args">
+      <BaseDescriptionListItem>
+        <template #left>Full name</template>
+        <template #right>Full name</template>
+      </BaseDescriptionListItem>
+      <BaseDescriptionListItem>
+        <template #left>Age</template>
+        <template #right>66 years old</template>
+      </BaseDescriptionListItem>
+      <BaseDescriptionListItem>
+        <template #left>Role</template>
+        <template #right><BaseBadge color="indigo">admin</BaseBadge></template>
+      </BaseDescriptionListItem>
+    </BaseDescriptionList>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseDescriptionList.vue

@@ -8,4 +8,6 @@
   </BaseCard>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import BaseCard from './BaseCard.vue';
+</script>

package/src/components/BaseSkeleton.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative isolate overflow-hidden rounded" :class="[background]">
     <div
-      class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] border-t border-white/80 bg-gradient-to-r from-transparent via-white/80 to-transparent"
+      class="animate-shimmer absolute inset-0 -translate-x-full border-t border-white/80 bg-gradient-to-r from-transparent via-white/80 to-transparent"
       :style="{
         animationDelay: delay,
       }"