Merge pull request #25 from IPLSplatoon/ux-tweaks

UX Tweaks

Author: inkfarer

.eslintrc.json

@@ -13,10 +13,6 @@
         "import/resolver": {
             "typescript": {
                 "project": "tsconfig.json"
-            },
-            "webpack": {
-                "config": "webpack.config.js",
-                "config-index": 0
             }
         },
         "import/extensions": [".js", ".ts"]
@@ -87,7 +83,9 @@
             "files": ["*.test.ts"],
             "rules": {
                 "@typescript-eslint/no-var-requires": 0,
-                "@typescript-eslint/no-this-alias": 0
+                "@typescript-eslint/no-this-alias": 0,
+                "@typescript-eslint/no-non-null-assertion": 0,
+                "vue/one-component-per-file": 0
             }
         },
         {

CHANGELOG.md

@@ -1,3 +1,143 @@
+# 3.0.0
+
+## Breaking
+
+- Library stylesheets must be manually imported 
+- ipl-radio requires a `name` prop
+- Some style changes may require dependent styles to use `!important` when it wasn't before. Some examples:
+  - `text-align` or `display` on ipl-button when the `clickable` prop is set
+- Input validation logic has been overhauled - the value to validate is no longer required when declaring field validators.
+  - <details>
+    <summary>Old implementation</summary>
+
+    ```vue
+    <template>
+      <ipl-input
+        v-model="firstValue"
+        name="firstValue"
+        label="First Value"
+      />
+      <ipl-input
+        v-model="secondValue"
+        name="secondValue"
+        label="Second Value"
+      />
+    </template>
+
+    <script lang="ts">
+    import { computed, defineComponent, ref } from 'vue';
+    import {
+      allValid,
+      IplInput,
+      notBlank,
+      provideValidators,
+      validator
+    } from '@iplsplatoon/vue-components';
+  
+    export default defineComponent({
+      components: { IplInput },
+  
+      setup() {
+        const firstValue = ref('');
+        const secondValue = ref('');
+  
+        const firstValueValidator = validator(firstValue, false, notBlank);
+        const validators = {
+          firstValue: firstValueValidator,
+          secondValue: validator(secondValue, false, notBlank)
+        };
+        provideValidators(validators);
+  
+        return {
+          allValid: computed(() => allValid(validators)),
+          firstValueValid: computed(() => firstValueValidator.isValid),
+          firstValue,
+          secondValue
+        };
+      }
+    });
+    </script>
+    ```
+    </details>
+  - <details>
+    <summary>New implementation</summary>
+
+    ```vue
+    <template>
+      <ipl-input
+        v-model="firstValue"
+        name="firstValue"
+        label="First Value"
+      />
+      <ipl-input
+        v-model="secondValue"
+        name="secondValue"
+        label="Second Value"
+      />
+    </template>
+
+    <script lang="ts">
+    import { computed, defineComponent, ref } from 'vue';
+    import {
+      // allValid is no longer an export - use the return value of provideValidators.
+      IplInput,
+      notBlank,
+      provideValidators,
+      validator
+    } from '@iplsplatoon/vue-components';
+  
+    export default defineComponent({
+      components: { IplInput },
+  
+      setup() {
+        const firstValue = ref('');
+        const secondValue = ref('');
+  
+        const { allValid, fieldIsValid } = provideValidators({
+          // The first parameter is no longer present.
+          firstValue: validator(false, notBlank),
+          secondValue: validator(false, notBlank)
+        });
+  
+        return {
+          allValid,
+          firstValueValid: computed(() => fieldIsValid('firstValue')),
+          firstValue,
+          secondValue
+        };
+      }
+    });
+    </script>
+    ```
+
+  </details>
+
+## Other Changes
+
+- Most components can be controlled by keyboard input when expected
+- Some components have been refactored:
+  - Clickable ipl-space components use the `<button>` element
+  - Buttons use `<button>` instead of `<a>` unless they are links
+  - ipl-sidebar uses the built-in `<dialog>` element
+  - ipl-small-toggle uses the `<input>` element instead of a bunch of divs
+- Buttons acting as links act as expected when they are disabled or require confirmation (#23)
+
+## Additions
+
+- Added ipl-textarea
+- Added ipl-pagination
+- ipl-input supports adding a placeholder
+- Added a larger theme for ipl-input
+- SSR support
+- Provide separate ESM and UMD builds
+- `color` and `without-content-background` props to ipl-expanding-space
+- Added `copiable` to ipl-data-row
+- ipl-data-row can contain any element as the value through the default slot
+- Updated ipl-button:
+  - Allow removing the background color
+  - Added `inline` prop
+  - Button size can be adjusted by changing `font-size` in CSS
+
 # 2.10.1
 
 - Move docs to a vitepress-powered concoction, combining the previously separate plain-text docs and locally built examples into a single site

docs/.vitepress/components/Demo.vue

@@ -19,6 +19,7 @@ import(`../../examples/${props.sourceFile}.vue`).then(result => {
 
 <style lang="scss">
 @use 'src/styles/colors';
+@use 'src/styles/constants';
 
 html.dark .demo-preview > *:first-child {
     --line-color: #37445C;
@@ -46,7 +47,7 @@ html.dark .demo-preview > *:first-child {
         linear-gradient(to right, var(--line-color) $grid-width, transparent $grid-width),
         linear-gradient(to bottom, var(--line-color) $grid-width, transparent $grid-width);
 
-    font-family: 'Roboto', sans-serif;
+    font-family: constants.$body-font;
     font-weight: 400;
     padding: 24px;
 
@@ -72,7 +73,7 @@ html.dark .demo-preview > *:first-child {
     margin: 0 auto;
 }
 
-.demo-preview > *:not(:first-child, .ipl-expansion-panel__content) {
+.demo-preview > *:not(:first-child, .ipl-expanding-space) {
     background-color: var(--vp-c-bg);
     border-radius: 8px;
     padding: 8px;

docs/.vitepress/config.mts

@@ -26,14 +26,16 @@ export default defineConfig({
                     { text: 'Expanding Space Group', link: '/ipl-expanding-space-group' },
                     { text: 'Message', link: '/ipl-message' },
                     { text: 'Input', link: '/ipl-input' },
+                    { text: 'Textarea', link: '/ipl-textarea' },
                     { text: 'Radio', link: '/ipl-radio' },
                     { text: 'Select', link: '/ipl-select' },
                     { text: 'Multi-Select', link: '/ipl-multi-select' },
                     { text: 'File Upload', link: '/ipl-upload' },
                     { text: 'Progress Bar', link: '/ipl-progress-bar' },
                     { text: 'Toggles', link: '/toggles' },
                     { text: 'Loading Spinner', link: '/ipl-spinner' },
-                    { text: 'Sidebar', link: '/ipl-sidebar' }
+                    { text: 'Sidebar', link: '/ipl-sidebar' },
+                    { text: 'Pagination', link: '/ipl-pagination' }
                 ]
             }
         ],

docs/.vitepress/theme/Layout.vue

@@ -0,0 +1,21 @@
+<template>
+    <DefaultLayout />
+</template>
+
+<script setup lang="ts">
+import DefaultLayout from 'vitepress/dist/client/theme-default/Layout.vue';
+import { useData } from 'vitepress';
+import { onMounted, watch } from 'vue';
+
+const { isDark } = useData();
+
+onMounted(() => {
+    watch(isDark, newValue => {
+        if (newValue) {
+            document.documentElement.classList.remove('light');
+        } else {
+            document.documentElement.classList.add('light');
+        }
+    }, { immediate: true });
+});
+</script>

docs/.vitepress/theme/index.ts

@@ -1,15 +1,25 @@
 // https://vitepress.dev/guide/custom-theme
-import type { Theme } from 'vitepress';
-import DefaultTheme from 'vitepress/theme-without-fonts';
+import { Theme } from 'vitepress';
 import Demo from '../components/Demo.vue';
 import EventLog from '../components/EventLog.vue';
 import { IplExpandingSpace } from '../../../src';
+import Layout from './Layout.vue';
 
+// Vitepress broke some of my styles, so I just resolved to... taking the bits that I didn't want out and importing
+// everything piecemeal. It works for now.
+import 'vitepress/dist/client/theme-default/styles/vars.css';
+import 'vitepress/dist/client/theme-default/styles/base.css';
+import 'vitepress/dist/client/theme-default/styles/utils.css';
+import 'vitepress/dist/client/theme-default/styles/components/custom-block.css';
+import 'vitepress/dist/client/theme-default/styles/components/vp-code.css';
+import 'vitepress/dist/client/theme-default/styles/components/vp-code-group.css';
+import './vp-doc.css';
+import 'vitepress/dist/client/theme-default/styles/components/vp-sponsor.css';
 import './style.scss';
 
 export default {
-    extends: DefaultTheme,
-    enhanceApp({ app, router, siteData }) {
+    Layout: Layout,
+    enhanceApp({ app }) {
         app.component('Demo', Demo);
         app.component('EventLog', EventLog);
         app.component('IplExpandingSpace', IplExpandingSpace);

docs/.vitepress/theme/style.scss

@@ -1,6 +1,7 @@
 @use '../../../src/styles/colors';
+@use '../../../src/styles/constants';
 
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');
 
 /**
@@ -33,25 +34,26 @@
     --vp-c-danger-2: #{colors.$error-color};
     --vp-c-danger-3: #{colors.$error-color};
     --vp-c-danger-soft: #{colors.$error-background-color};
+
+    --vp-c-bg: var(--ipl-bg-primary);
+    --vp-c-bg-alt: var(--ipl-bg-secondary);
+    --vp-c-bg-soft: var(--ipl-bg-secondary);
+    --vp-c-bg-elv: var(--ipl-bg-secondary);
 }
 
 .dark {
-    --vp-c-bg: #{colors.$background-primary};
-    --vp-c-bg-alt: #{colors.$background-secondary};
-    --vp-c-bg-soft: #{colors.$background-secondary};
-    --vp-c-bg-elv: #{colors.$background-secondary};
     --vp-c-divider: #606770;
 }
 
 :root {
-    --vp-font-family-base: 'Roboto', sans-serif;
+    --vp-font-family-base: #{constants.$body-font};
     --vp-font-family-mono: 'Roboto Mono', monospace;
     --vp-code-color: var(--vp-c-text-1);
 }
 
 .source-example {
     margin-top: 8px;
-    font-family: 'Roboto', sans-serif;
+    font-family: constants.$body-font;
     font-synthesis: none;
 
     [class*='language-'] {
@@ -80,32 +82,19 @@
     flex-wrap: wrap;
     justify-content: center;
 
-    > * {
-        width: auto !important;
+    &.no-wrap {
+        flex-wrap: nowrap;
+    }
 
-        &:not(:last-child) {
-            margin-right: 12px;
-        }
+    > *:not(:last-child) {
+        margin-right: 12px;
     }
 }
 
 .vertical-layout > *:not(:last-child) {
     margin-bottom: 8px;
 }
 
-// TODO: actually integrate these into the library
-.ipl-expansion-panel__content {
-    background-color: var(--vp-c-bg) !important;
-}
-
-html:not(.dark) .ipl-expansion-panel__header-background:hover {
-    background-color: #FBFBFB !important;
-}
-
-html:not(.dark) .ipl-expansion-panel__header-background:active {
-    background-color: #F8F8F8 !important;
-}
-
 html {
     line-height: normal;
 }