@fewangsit/wangsvue-presets 1.0.80 → 1.0.81-alpha.1

package/wangsvue/tabview/index.js

@@ -1,148 +1,168 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    navContainer: function (_a) {
-        var props = _a.props;
-        return ({
-            class: [
-                // Position
-                'relative',
-                // Misc
-                { 'overflow-hidden': props.scrollable },
-            ],
-        });
-    },
-    navContent: {
-        class: [
-            // Overflow and Scrolling
-            'overflow-y-hidden overscroll-contain',
-            'overscroll-auto',
-            'scroll-smooth',
-            '[&::-webkit-scrollbar]:hidden',
-        ],
-    },
-    previousButton: {
-        class: [
-            // Flexbox and Alignment
-            'flex items-center justify-center',
-            // Position
-            '!absolute',
-            'top-0 left-0',
-            'z-20',
-            // Size and Shape
-            'h-full w-12',
-            'rounded-none',
-            // Colors
-            'bg-surface-0',
-            'text-primary-500',
-            'shadow-md',
-        ],
-    },
-    nextButton: {
-        class: [
-            // Flexbox and Alignment
-            'flex items-center justify-center',
-            // Position
-            '!absolute',
-            'top-0 right-0',
-            'z-20',
-            // Size and Shape
-            'h-full w-12',
-            'rounded-none',
-            // Colors
-            'bg-surface-0',
-            'text-primary-500',
-            'shadow-md',
-        ],
-    },
-    nav: {
-        class: [
-            // Flexbox
-            'flex flex-1',
-            // Spacing
-            'list-none',
-            'p-0 m-0',
-            // Colors
-            'bg-surface-0',
-            'border-b border-surface-200',
-            'text-surface-900/80',
-        ],
-    },
-    tabpanel: {
-        header: function (_a) {
-            var props = _a.props;
-            return ({
-                class: [
-                    // Spacing
-                    'mr-0',
-                    // Misc
-                    {
-                        'opacity-60 cursor-default user-select-none select-none pointer-events-none': props === null || props === void 0 ? void 0 : props.disabled,
-                    },
-                ],
-            });
-        },
-        headerAction: function (_a) {
-            var parent = _a.parent, context = _a.context;
-            return ({
-                class: [
-                    'relative',
-                    // Font
-                    'font-medium',
-                    'text-md',
-                    // Flexbox and Alignment
-                    'flex items-center',
-                    // Spacing
-                    'py-4 px-3',
-                    '-mb-[1px]',
-                    // Shape
-                    'border-b-2',
-                    'rounded-t-md',
-                    // Colors and Conditions
-                    {
-                        'border-surface-200': parent.state.d_activeIndex !== context.index,
-                        'bg-surface-0': parent.state.d_activeIndex !== context.index,
-                        'text-surface-700/80': parent.state.d_activeIndex !== context.index,
-                        'bg-surface-0': parent.state.d_activeIndex === context.index,
-                        'border-primary-500': parent.state.d_activeIndex === context.index,
-                        'text-primary-500': parent.state.d_activeIndex === context.index,
-                    },
-                    // States
-                    'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-inset',
-                    'focus-visible:ring-primary-500',
-                    {
-                        'hover:bg-surface-0': parent.state.d_activeIndex !== context.index,
-                        'hover:border-surface-400': parent.state.d_activeIndex !== context.index,
-                        'hover:text-surface-900': parent.state.d_activeIndex !== context.index,
-                    },
-                    // Transitions
-                    'transition-all duration-200',
-                    // Misc
-                    'cursor-pointer select-none text-decoration-none',
-                    'overflow-hidden',
-                    'user-select-none',
-                    'whitespace-nowrap',
-                ],
-            });
-        },
-        headerTitle: {
-            class: [
-                // Text
-                'leading-none',
-                'whitespace-nowrap',
-            ],
-        },
-        content: {
-            class: [
-                // Spacing
-                'p-6',
-                // Shape
-                'rounded-b-md',
-                // Colors
-                'bg-surface-0',
-                'text-surface-700/80',
-                'border-0',
-            ],
-        },
-    },
-};
+export default {
+  navContainer: ({ props }) => ({
+    class: [
+      // Position
+      'relative',
+
+      // Misc
+      { 'overflow-hidden': props.scrollable },
+    ],
+  }),
+  navContent: {
+    class: [
+      // Overflow and Scrolling
+      'overflow-y-hidden overscroll-contain',
+      'overscroll-auto',
+      'scroll-smooth',
+      '[&::-webkit-scrollbar]:hidden',
+    ],
+  },
+  previousButton: {
+    class: [
+      // Flexbox and Alignment
+      'flex items-center justify-center',
+
+      // Position
+      '!absolute',
+      'top-0 left-0',
+      'z-20',
+
+      // Size and Shape
+      'h-full w-12',
+      'rounded-none',
+
+      // Colors
+      'bg-surface-0',
+      'text-primary-500',
+      'shadow-md',
+    ],
+  },
+  nextButton: {
+    class: [
+      // Flexbox and Alignment
+      'flex items-center justify-center',
+
+      // Position
+      '!absolute',
+      'top-0 right-0',
+      'z-20',
+
+      // Size and Shape
+      'h-full w-12',
+      'rounded-none',
+
+      // Colors
+      'bg-surface-0',
+      'text-primary-500',
+      'shadow-md',
+    ],
+  },
+  nav: {
+    class: [
+      // Flexbox
+      'flex flex-1',
+
+      // Spacing
+      'list-none',
+      'p-0 m-0',
+
+      // Colors
+      'bg-surface-0',
+      'border-b border-surface-200',
+      'text-surface-900/80',
+    ],
+  },
+  tabpanel: {
+    header: ({ props }) => ({
+      class: [
+        // Spacing
+        'mr-0',
+
+        // Misc
+        {
+          'opacity-60 cursor-default user-select-none select-none pointer-events-none':
+            props?.disabled,
+        },
+      ],
+    }),
+    headerAction: ({ parent, context }) => ({
+      class: [
+        'relative',
+
+        // Font
+        'font-medium',
+        'text-md',
+
+        // Flexbox and Alignment
+        'flex items-center',
+
+        // Spacing
+        'py-4 px-3',
+        '-mb-[1px]',
+
+        // Shape
+        'border-b-2',
+        'rounded-t-md',
+
+        // Colors and Conditions
+        {
+          'border-surface-200':
+            parent.state.d_activeIndex !== context.index,
+          'bg-surface-0':
+            parent.state.d_activeIndex !== context.index,
+          'text-surface-700/80':
+            parent.state.d_activeIndex !== context.index,
+
+          'bg-surface-0':
+            parent.state.d_activeIndex === context.index,
+          'border-primary-500':
+            parent.state.d_activeIndex === context.index,
+          'text-primary-500':
+            parent.state.d_activeIndex === context.index,
+        },
+
+        // States
+        'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-inset',
+        'focus-visible:ring-primary-500',
+        {
+          'hover:bg-surface-0':
+            parent.state.d_activeIndex !== context.index,
+          'hover:border-surface-400':
+            parent.state.d_activeIndex !== context.index,
+          'hover:text-surface-900':
+            parent.state.d_activeIndex !== context.index,
+        },
+
+        // Transitions
+        'transition-all duration-200',
+
+        // Misc
+        'cursor-pointer select-none text-decoration-none',
+        'overflow-hidden',
+        'user-select-none',
+        'whitespace-nowrap',
+      ],
+    }),
+    headerTitle: {
+      class: [
+        // Text
+        'leading-none',
+        'whitespace-nowrap',
+      ],
+    },
+    content: {
+      class: [
+        // Spacing
+        'p-6',
+
+        // Shape
+        'rounded-b-md',
+
+        // Colors
+        'bg-surface-0',
+        'text-surface-700/80',
+        'border-0',
+      ],
+    },
+  },
+};

package/wangsvue/tag/index.js

@@ -1,37 +1,37 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: function (_a) {
-        var props = _a.props;
-        return ({
-            class: [
-                //Font
-                'text-xs font-bold',
-                //Alignments
-                'inline-flex items-center justify-center',
-                //Spacing
-                'px-2 py-1',
-                //Shape
-                {
-                    'rounded-md': !props.rounded,
-                    'rounded-full': props.rounded,
-                },
-                //Colors
-                'text-white',
-                {
-                    'bg-primary-500': props.severity == null || props.severity == 'primary',
-                    'bg-green-500': props.severity == 'success',
-                    'bg-blue-500': props.severity == 'info',
-                    'bg-orange-500': props.severity == 'warning',
-                    'bg-red-500': props.severity == 'danger',
-                },
-            ],
-        });
-    },
-    value: {
-        class: 'leading-normal',
-    },
-    icon: {
-        class: 'mr-1 text-sm',
-    },
-};
+export default {
+  root: ({ props }) => ({
+    class: [
+      //Font
+      'text-xs font-bold',
+
+      //Alignments
+      'inline-flex items-center justify-center',
+
+      //Spacing
+      'px-2 py-1',
+
+      //Shape
+      {
+        'rounded-md': !props.rounded,
+        'rounded-full': props.rounded,
+      },
+
+      //Colors
+      'text-white',
+      {
+        'bg-primary-500':
+          props.severity == null || props.severity == 'primary',
+        'bg-green-500': props.severity == 'success',
+        'bg-blue-500': props.severity == 'info',
+        'bg-orange-500': props.severity == 'warning',
+        'bg-red-500': props.severity == 'danger',
+      },
+    ],
+  }),
+  value: {
+    class: 'leading-normal',
+  },
+  icon: {
+    class: 'mr-1 text-sm',
+  },
+};

package/wangsvue/tailwind.config.js

@@ -0,0 +1,20 @@
+import colors from './colors.config.json';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'selector',
+  content: ['./**/*.js'],
+  theme: {
+    extend: {
+      colors,
+      outline: {
+        none: 'none',
+      },
+      boxShadow: {
+        panel: '-4px 4px 20px 0px rgba(0, 0, 0, 0.10)',
+        hover: '0px 1px 3px 1px #00000033',
+      },
+    },
+  },
+  plugins: [],
+};

package/wangsvue/terminal/index.js

@@ -1,55 +1,60 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: {
-        class: [
-            // Spacing
-            'p-5',
-            // Shape
-            'rounded-md',
-            // Color
-            'bg-surface-900 text-white',
-            'border border-surface-700',
-            // Sizing & Overflow
-            'h-72 overflow-auto',
-        ],
-    },
-    container: {
-        class: [
-            // Flexbox
-            'flex items-center',
-        ],
-    },
-    prompt: {
-        class: [
-            // Color
-            'text-surface-400',
-        ],
-    },
-    response: {
-        class: [
-            // Color
-            'text-primary-400',
-        ],
-    },
-    command: {
-        class: [
-            // Color
-            'text-primary-400',
-        ],
-    },
-    commandtext: {
-        class: [
-            // Flexbox
-            'flex-1 shrink grow-0',
-            // Shape
-            'border-0',
-            // Spacing
-            'p-0',
-            // Color
-            'bg-transparent text-inherit',
-            // Outline
-            'outline-none',
-        ],
-    },
-};
+export default {
+  root: {
+    class: [
+      // Spacing
+      'p-5',
+
+      // Shape
+      'rounded-md',
+
+      // Color
+      'bg-surface-900 text-white',
+      'border border-surface-700',
+
+      // Sizing & Overflow
+      'h-72 overflow-auto',
+    ],
+  },
+  container: {
+    class: [
+      // Flexbox
+      'flex items-center',
+    ],
+  },
+  prompt: {
+    class: [
+      // Color
+      'text-surface-400',
+    ],
+  },
+  response: {
+    class: [
+      // Color
+      'text-primary-400',
+    ],
+  },
+  command: {
+    class: [
+      // Color
+      'text-primary-400',
+    ],
+  },
+  commandtext: {
+    class: [
+      // Flexbox
+      'flex-1 shrink grow-0',
+
+      // Shape
+      'border-0',
+
+      // Spacing
+      'p-0',
+
+      // Color
+      'bg-transparent text-inherit',
+
+      // Outline
+      'outline-none',
+    ],
+  },
+};

package/wangsvue/textarea/index.js

@@ -1,51 +1,44 @@
-"use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var global_js_1 = require("../global.js");
-exports.default = {
-    root: function (_a) {
-        var context = _a.context, props = _a.props;
-        return ({
-            'class': __spreadArray(__spreadArray([
-                // Font
-                'font-normal placeholder:text-general-200 placeholder:!font-normal text-xs',
-                'w-full',
-                {
-                    'resize-none': props.autoResize,
-                    'resize': !props.autoResize,
-                },
-                props.inputClass,
-                // Spacing
-                'm-0',
-                'py-1 px-3',
-                // Shape
-                'rounded',
-                'appearance-none'
-            ], global_js_1.ringClass, true), [
-                {
-                    '!ring-danger-500': context.invalidInput,
-                },
-                // // States
-                {
-                    'bg-transparent text-general-800': !context.disabled,
-                    'bg-general-50 text-general-200': context.disabled,
-                },
-                'focus-visible:outline-none',
-                // Misc
-                'appearance-none',
-                'transition-colors duration-200',
-            ], false),
-            'style': "min-height: ".concat(props.rows * 26, "px"),
-            'data-wv-name': 'textarea',
-            'data-wv-section': 'root',
-        });
-    },
-};
+import { ringClass } from '../global.js';
+
+export default {
+  root: ({ context, props }) => ({
+    'class': [
+      // Font
+      'font-normal placeholder:text-general-200 placeholder:!font-normal text-xs',
+
+      'w-full',
+      {
+        'resize-none': props.autoResize,
+        'resize': !props.autoResize,
+      },
+
+      props.inputClass,
+      // Spacing
+      'm-0',
+      'py-1 px-3',
+
+      // Shape
+      'rounded',
+      'appearance-none',
+
+      ...ringClass,
+      {
+        '!ring-danger-500': context.invalidInput,
+      },
+
+      // // States
+      {
+        'bg-transparent text-general-800': !context.disabled,
+        'bg-general-50 text-general-200': context.disabled,
+      },
+      'focus-visible:outline-none',
+
+      // Misc
+      'appearance-none',
+      'transition-colors duration-200',
+    ],
+    'style': `min-height: ${props.rows * 26}px`,
+    'data-wv-name': 'textarea',
+    'data-wv-section': 'root',
+  }),
+};