Disabled links (#164)

* Disabled links, Fixes

* bump v

* fix checks

docs/components/button.md

@@ -24,6 +24,8 @@
 <Button color="primary" large><DownloadIcon /> Download</Button>
 <Button color="blue" large><ServerIcon /> Host a Server</Button>
 <Button color="purple" large><HeartIcon /> Donate</Button>
+
+<Button link="/test" color="purple" large disabled><HeartIcon /> Disabled link</Button>
 </DemoContainer>
 
 ```vue

lib/assets/styles/classes.scss

@@ -268,16 +268,16 @@ a,
   border: none;
   outline: 2px solid transparent;
 
-  &:focus-visible:not(&:disabled),
-  &:hover:not(&:disabled) {
+  &:focus-visible:not(&:disabled, &.disabled),
+  &:hover:not(&:disabled, &.disabled) {
     cursor: pointer;
 
     &:not(.btn-outline.btn-hover-filled, .btn-transparent) {
       filter: var(--filter-hover);
     }
   }
 
-  &:active:not(&:disabled, .btn-outline.btn-hover-filled, .btn-transparent) {
+  &:active:not(&:disabled, &.disabled, .btn-outline.btn-hover-filled, .btn-transparent) {
     filter: var(--filter-active);
   }
 
@@ -286,7 +286,8 @@ a,
   }
 
   &:disabled:not(.quiet-disabled),
-  &[disabled]:not(.quiet-disabled) {
+  &[disabled]:not(.quiet-disabled),
+  &.disabled:not(.quiet-disabled) {
     cursor: not-allowed;
     filter: grayscale(50%);
     opacity: 0.5;
@@ -353,8 +354,8 @@ a,
       color: var(--color-base);
     }
 
-    &:focus-visible:not(&:disabled),
-    &:hover:not(&:disabled) {
+    &:focus-visible:not(&:disabled, &.disabled),
+    &:hover:not(&:disabled, &.disabled) {
       background-color: var(--color-button-bg);
 
       &.btn-hover-filled,
@@ -376,8 +377,8 @@ a,
       border-color: var(--color-contrast);
     }
 
-    &:focus-visible:not(&:disabled),
-    &:hover:not(&:disabled) {
+    &:focus-visible:not(&:disabled, &.disabled),
+    &:hover:not(&:disabled, &.disabled) {
       &.btn-hover-filled,
       &.btn-hover-filled-only {
         border-color: var(--_accent-color);
@@ -570,6 +571,7 @@ a,
 .project-list.display-mode--grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.75rem;
 
   @media screen and (max-width: 80rem) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -596,7 +598,7 @@ a,
 
   background-color: var(--color-raised-bg);
   border-radius: var(--radius-lg);
-  border: var(--card-border-width) solid var(--card-divider);
+  border: var(--card-border-width) solid var(--color-card-divider);
 
   margin-bottom: var(--gap-md);
   outline: 2px solid transparent;
@@ -974,7 +976,7 @@ a,
     }
 
     tr:nth-child(2n) {
-      background-color: var(--color-accent-contrast);
+      background-color: var(--color-alt-bg);
     }
 
     td:not(:last-of-type),

lib/components/base/Button.vue

@@ -44,6 +44,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const accentedButton = computed(() =>
@@ -73,6 +77,7 @@ const accentedButton = computed(() =>
       'btn-hover-filled-only': hoverFilledOnly,
       'btn-outline': outline,
       'color-accent-contrast': accentedButton,
+      disabled: disabled,
     }"
     :to="link"
     :target="external ? '_blank' : '_self'"
@@ -102,6 +107,7 @@ const accentedButton = computed(() =>
       'btn-hover-filled-only': hoverFilledOnly,
       'btn-outline': outline,
       'color-accent-contrast': accentedButton,
+      disabled: disabled,
     }"
     :href="link"
     :target="external ? '_blank' : '_self'"
@@ -132,6 +138,7 @@ const accentedButton = computed(() =>
       'btn-outline': outline,
       'color-accent-contrast': accentedButton,
     }"
+    :disabled="disabled"
     @click="action"
   >
     <slot />

lib/components/base/MarkdownEditor.vue

@@ -48,7 +48,7 @@
         <Button :action="() => linkModal?.hide()"><XIcon /> Cancel</Button>
         <Button
           color="primary"
-          :disabled="linkValidationErrorMessage || !linkUrl"
+          :disabled="!!linkValidationErrorMessage || !linkUrl"
           :action="
             () => {
               if (editor) markdownCommands.replaceSelection(editor, linkMarkdown)
@@ -189,7 +189,7 @@
         <Button :action="() => videoModal?.hide()"><XIcon /> Cancel</Button>
         <Button
           color="primary"
-          :disabled="linkValidationErrorMessage || !linkUrl"
+          :disabled="!!linkValidationErrorMessage || !linkUrl"
           :action="
             () => {
               if (editor) markdownCommands.replaceSelection(editor, videoMarkdown)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "files": [
     "dist",
     "locales"