sprintify-ui 0.8.28 → 0.8.30

package/dist/tailwindcss/button.js

@@ -1,5 +1,5 @@
-module.exports = function (theme) {
-    return {
+module.exports = function ({ addComponents, theme }) {
+    addComponents({
         // Button
         '.btn': {
             position: 'relative',
@@ -257,5 +257,5 @@ module.exports = function (theme) {
                 '--tw-ring-color': theme('colors.slate.200'),
             },
         },
-    }
+    });
 }

package/dist/tailwindcss/index.js

@@ -4,19 +4,18 @@ const theme = require('./theme');
 const button = require('./button');
 const overlay = require('./overlay');
 const input = require('./input');
+const table = require('./table');
 
 const config = {
   theme: theme
 }
 
 module.exports = plugin(
-  function ({ addComponents, theme }) {
-    addComponents(
-      Object.assign({},
-        button(theme),
-        overlay(theme),
-        input(theme),
-      ));
+  function (ctx) {
+    button(ctx);
+    overlay(ctx);
+    input(ctx);
+    table(ctx);
   },
   config
 );

package/dist/tailwindcss/input.js

@@ -1,11 +1,11 @@
 const { parseColor } = require("tailwindcss/lib/util/color");
 
-module.exports = function (theme) {
+module.exports = function ({ addComponents, theme }) {
 
     const blueColor = parseColor(theme('colors.blue.600')).color.join(", ");
     const redColor = parseColor(theme('colors.red.600')).color.join(", ");
 
-    return {
+    addComponents({
         '.input-focus': {
             'border-color': `rgba(${(blueColor)}, 0.6)`,
             'zIndex': 1,
@@ -19,5 +19,5 @@ module.exports = function (theme) {
         '.input-rounded': {
             'border-radius': theme('borderRadius.md'),
         }
-    }
+    });
 }

package/dist/tailwindcss/overlay.js

@@ -1,5 +1,5 @@
-module.exports = function (theme) {
-    return {
+module.exports = function ({ addComponents }) {
+    addComponents({
         '.overlay': {
             position: 'absolute',
             top: 0,
@@ -9,5 +9,5 @@ module.exports = function (theme) {
             width: '100%',
             height: '100%',
         },
-    }
+    });
 }

package/dist/tailwindcss/table.js

@@ -0,0 +1,92 @@
+module.exports = function ({ addVariant, addComponents, e, theme }) {
+
+    // Variants
+
+    addVariant('tr', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+            return `.${e(`tr${separator}${className}`)} tr`
+        })
+    });
+
+    addVariant('th', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+            return `.${e(`th${separator}${className}`)} th`
+        })
+    });
+
+    addVariant('td', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+            return `.${e(`td${separator}${className}`)} td`
+        })
+    });
+
+    // Components
+
+    const borderWidth = theme('borderWidth.DEFAULT');
+    const borderStyle = theme('borderStyle.solid');
+    const borderColor = theme('colors.slate.200');
+
+    addComponents({
+        '.tabulation': {
+            'border-collapse': 'collapse',
+            'border-bottom-width': borderWidth,
+            'border-bottom-style': borderStyle,
+            'border-bottom-color': borderColor,
+            'border-radius': theme('borderRadius.md'),
+            'table-layout': 'fixed',
+        },
+        '.tabulation thead': {
+            'background-color': theme('colors.slate.100'),
+        },
+        '.tabulation th, .tabulation td': {
+            'padding': theme('spacing.3') + ' ' + theme('spacing.2'),
+            'text-align': 'left',
+            'border-bottom-width': borderWidth,
+            'border-bottom-style': borderStyle,
+            'border-bottom-color': borderColor,
+        },
+        '.tabulation th': {
+            'font-weight': theme('fontWeight.bold'),
+        },
+        '.tabulation.tabulation-nowrap td, .tabulation.tabulation-nowrap th': {
+            'white-space': 'nowrap',
+        },
+        '.tabulation.tabulation-flush td:first-child, .tabulation.tabulation-flush th:first-child': {
+            'padding-left': '0',
+        },
+        '.tabulation.tabulation-flush td:last-child, .tabulation.tabulation-flush th:last-child': {
+            'padding-right': '0',
+        },
+        // Sizes
+        '.tabulation-xs th, .tabulation-xs td': {
+            'padding': theme('spacing.1') + ' ' + theme('spacing.2'),
+            'font-size': theme('fontSize.xs'),
+        },
+        '.tabulation-sm th, .tabulation-sm td': {
+            'padding': theme('spacing.1') + ' ' + theme('spacing.2'),
+            'font-size': theme('fontSize.sm'),
+        },
+        '.tabulation-md th, .tabulation-md td': {
+            'padding': theme('spacing.2') + ' ' + theme('spacing.3'),
+            'font-size': theme('fontSize.sm'),
+        },
+        '.tabulation-lg th, .tabulation-lg td': {
+            'padding': theme('spacing.3') + ' ' + theme('spacing.4'),
+            'font-size': theme('fontSize.base'),
+        },
+        '.tabulation-xl th, .tabulation-xl td': {
+            'padding': theme('spacing.4') + ' ' + theme('spacing.5'),
+            'font-size': theme('fontSize.lg'),
+        },
+        // Striped
+        '.tabulation.tabulation-striped tr:nth-child(even)': {
+            'background-color': theme('colors.slate.100'),
+        },
+        // Grid
+        '.tabulation.tabulation-grid th, .tabulation.tabulation-grid td': {
+            'border-width': borderWidth,
+            'border-style': borderStyle,
+            'border-color': borderColor,
+        },
+    });
+};

package/dist/types/components/BaseAppDialogs.vue.d.ts

@@ -4,6 +4,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         color: "info" | "success" | "danger" | "warning";
         title: string;
         message: string;
+        errorMessage: string | null | undefined;
         html: boolean;
         input: false | {
             label?: string | undefined;

package/dist/types/components/BaseDialog.vue.d.ts

@@ -13,6 +13,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: StringConstructor;
     };
+    errorMessage: {
+        default: string;
+        type: PropType<string | null | undefined>;
+    };
     html: {
         default: boolean;
         type: BooleanConstructor;
@@ -45,6 +49,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: StringConstructor;
     };
+    errorMessage: {
+        default: string;
+        type: PropType<string | null | undefined>;
+    };
     html: {
         default: boolean;
         type: BooleanConstructor;
@@ -67,6 +75,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {
     title: string;
     message: string;
+    errorMessage: string | null | undefined;
     html: boolean;
     input: boolean | InputConfigProps;
     confirmText: string;

package/dist/types/types/index.d.ts

@@ -120,6 +120,7 @@ export interface DialogOptions {
     color?: 'info' | 'success' | 'danger' | 'warning';
     title: string;
     message: string;
+    errorMessage?: string | null | undefined;
     html?: boolean;
     input?: InputConfigProps | false;
     confirmText?: string;
@@ -133,6 +134,7 @@ export interface Dialog {
     color: 'info' | 'success' | 'danger' | 'warning';
     title: string;
     message: string;
+    errorMessage: string | null | undefined;
     html: boolean;
     input: InputConfigProps | false;
     confirmText: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.8.28",
+  "version": "0.8.30",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseAppDialogs.vue

@@ -46,6 +46,7 @@
             :color="dialog.color"
             :title="dialog.title"
             :message="dialog.message"
+            :error-message="dialog.errorMessage"
             :confirm-text="dialog.confirmText"
             :html="dialog.html"
             :input="dialog.input"

package/src/components/BaseDialog.stories.js

@@ -79,3 +79,17 @@ WithInput.args = {
     placeholder: 'Password',
   },
 };
+
+export const ErrorMessage = Template.bind({});
+ErrorMessage.args = {
+  color: 'danger',
+  title: 'Please confirm your password',
+  errorMessage: 'Invalid password',
+  input: {
+    label: 'Enter your password',
+    type: 'password',
+    size: 'sm',
+    required: true,
+    placeholder: 'Password',
+  },
+};

package/src/components/BaseDialog.vue

@@ -83,6 +83,15 @@
               class="w-full"
             />
           </BaseField>
+
+          <BaseAlert
+            v-if="errorMessage"
+            class="mt-4"
+            color="danger"
+            bordered
+          >
+            {{ errorMessage }}
+          </BaseAlert>
         </slot>
       </div>
     </div>
@@ -116,6 +125,7 @@ import BaseButton from './BaseButton.vue';
 import BaseInput from './BaseInput.vue';
 import BaseField from './BaseField.vue';
 import BasePassword from './BasePassword.vue';
+import BaseAlert from './BaseAlert.vue';
 import { InputConfigProps } from '@/types';
 
 const props = defineProps({
@@ -131,6 +141,10 @@ const props = defineProps({
     default: '',
     type: String,
   },
+  errorMessage: {
+    default: '',
+    type: [String, null, undefined] as PropType<string | null | undefined>,
+  },
   html: {
     default: false,
     type: Boolean,

package/src/components/BaseTable.stories.js

@@ -68,6 +68,38 @@ const Template = (args) => ({
     return { args, optionsLarge };
   },
   template: `
+
+  <table class="tabulation tabulation-grid tabulation-sm tabulation-striped w-full bg-white border mb-5">
+    <thead>
+      <tr>
+        <th>Label</th>
+        <th>ID</th>
+        <th>Type</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Label</td>
+        <td>ID</td>
+        <td>Type</td>
+        <td>Description</td>
+      </tr>
+      <tr>
+        <td>Label</td>
+        <td>ID</td>
+        <td>Type</td>
+        <td>Description</td>
+      </tr>
+      <tr>
+        <td>Label</td>
+        <td>ID</td>
+        <td>Type</td>
+        <td>Description</td>
+      </tr>
+    </tbody>
+  </table>
+
   <div class="border">
     <BaseTable class="w-full" v-bind="args">
       ${headTemplate}

package/src/components/BaseTable.vue

@@ -99,6 +99,7 @@ function scrollTop() {
 }
 
 // Virtual Scrolling
+
 const virtualScrollingDefaultRowHeight = ref(null) as Ref<number | null | undefined>;
 function setVirtualScrollingDefaultRowHeight(height: number) {
   virtualScrollingDefaultRowHeight.value = height;

package/src/stores/dialogs.ts

@@ -17,6 +17,7 @@ export const useDialogsStore = defineStore('dialogs', {
         color: options.color ?? 'info',
         title: options.title,
         message: options.message,
+        errorMessage: options.errorMessage,
         html: options.html ?? false,
         confirmText: options.confirmText ?? t('sui.confirm'),
         cancelText: options.cancelText ?? t('sui.cancel'),

package/src/types/index.ts

@@ -152,6 +152,7 @@ export interface DialogOptions {
   color?: 'info' | 'success' | 'danger' | 'warning';
   title: string;
   message: string;
+  errorMessage?: string | null | undefined;
   html?: boolean;
   input?: InputConfigProps | false;
   confirmText?: string;
@@ -166,6 +167,7 @@ export interface Dialog {
   color: 'info' | 'success' | 'danger' | 'warning';
   title: string;
   message: string;
+  errorMessage: string | null | undefined;
   html: boolean;
   input: InputConfigProps | false;
   confirmText: string;