@knime/kds-components 0.1.0 → 0.2.0

package/dist/index.css

@@ -52,7 +52,7 @@ html.kds-legacy {
 }
 
 .button {
-&[data-v-6eda26d0] {
+&[data-v-f82890d7] {
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -66,125 +66,125 @@ html.kds-legacy {
 
   /* for LinkButton */
 }
-&[data-v-6eda26d0]:is(a) {
+&[data-v-f82890d7]:is(a) {
     text-decoration: none;
 }
-&.disabled[data-v-6eda26d0] {
+&.disabled[data-v-f82890d7] {
     cursor: not-allowed;
 }
-&[data-v-6eda26d0]:focus-visible {
+&[data-v-f82890d7]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 &.filled {
-&[data-v-6eda26d0] {
+&[data-v-f82890d7] {
     color: var(--kds-color-text-and-icon-primary-inverted);
     background-color: var(--kds-color-background-primary-bold-initial);
     border: var(--kds-border-action-transparent);
 }
-&.disabled[data-v-6eda26d0] {
+&.disabled[data-v-f82890d7] {
       color: var(--kds-color-text-and-icon-disabled-inverted);
       background-color: var(--kds-color-background-disabled-primary);
 }
 &:not(.disabled) {
-&[data-v-6eda26d0]:hover {
+&[data-v-f82890d7]:hover {
         background-color: var(--kds-color-background-primary-bold-hover);
 }
-&[data-v-6eda26d0]:active {
+&[data-v-f82890d7]:active {
         background-color: var(--kds-color-background-primary-bold-active);
 }
 }
 &.destructive {
-&[data-v-6eda26d0] {
+&[data-v-f82890d7] {
       color: var(--kds-color-text-and-icon-danger-inverted);
       background-color: var(--kds-color-background-danger-bold-initial);
 }
-&.disabled[data-v-6eda26d0] {
+&.disabled[data-v-f82890d7] {
         color: var(--kds-color-text-and-icon-disabled-inverted);
         background-color: var(--kds-color-background-disabled-danger);
 }
 &:not(.disabled) {
-&[data-v-6eda26d0]:hover {
+&[data-v-f82890d7]:hover {
           background-color: var(--kds-color-background-danger-bold-hover);
 }
-&[data-v-6eda26d0]:active {
+&[data-v-f82890d7]:active {
           background-color: var(--kds-color-background-danger-bold-active);
 }
 }
 }
 }
 &.outlined {
-&[data-v-6eda26d0] {
+&[data-v-f82890d7] {
     color: var(--kds-color-text-and-icon-neutral);
     background-color: var(--kds-color-background-neutral-initial);
     border: var(--kds-border-action-default);
 }
-&.disabled[data-v-6eda26d0] {
+&.disabled[data-v-f82890d7] {
       color: var(--kds-color-text-and-icon-disabled);
       border: var(--kds-border-action-disabled);
 }
 &:not(.disabled) {
-&[data-v-6eda26d0]:hover {
+&[data-v-f82890d7]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-6eda26d0]:active {
+&[data-v-f82890d7]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-6eda26d0] {
+&[data-v-f82890d7] {
       color: var(--kds-color-text-and-icon-danger);
       border: var(--kds-border-action-error);
 }
-&.disabled[data-v-6eda26d0] {
+&.disabled[data-v-f82890d7] {
         color: var(--kds-color-text-and-icon-disabled);
         border: var(--kds-border-action-disabled);
 }
 &:not(.disabled) {
-&[data-v-6eda26d0]:hover {
+&[data-v-f82890d7]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-6eda26d0]:active {
+&[data-v-f82890d7]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.transparent {
-&[data-v-6eda26d0] {
+&[data-v-f82890d7] {
     color: var(--kds-color-text-and-icon-neutral);
     background-color: var(--kds-color-background-neutral-initial);
     border: var(--kds-border-action-transparent);
 }
-&.disabled[data-v-6eda26d0] {
+&.disabled[data-v-f82890d7] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled) {
-&[data-v-6eda26d0]:hover {
+&[data-v-f82890d7]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-6eda26d0]:active {
+&[data-v-f82890d7]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-6eda26d0] {
+&[data-v-f82890d7] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&.disabled[data-v-6eda26d0] {
+&.disabled[data-v-f82890d7] {
         color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled) {
-&[data-v-6eda26d0]:hover {
+&[data-v-f82890d7]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-6eda26d0]:active {
+&[data-v-f82890d7]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
-& .label[data-v-6eda26d0] {
+& .label[data-v-f82890d7] {
     max-width: 200px;
     padding: 0 var(--kds-spacing-container-0-12x);
     overflow: hidden;
@@ -192,7 +192,7 @@ html.kds-legacy {
     white-space: nowrap;
     text-rendering: geometricprecision;
 }
-&.xsmall[data-v-6eda26d0] {
+&.xsmall[data-v-f82890d7] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-25x);
     padding: 0
@@ -204,7 +204,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-25x)
     );
 }
-&.small[data-v-6eda26d0] {
+&.small[data-v-f82890d7] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-5x);
     padding: 0
@@ -216,7 +216,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-37x)
     );
 }
-&.medium[data-v-6eda26d0] {
+&.medium[data-v-f82890d7] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-1-75x);
     padding: 0
@@ -229,7 +229,7 @@ html.kds-legacy {
     );
 }
 &.large {
-&[data-v-6eda26d0] {
+&[data-v-f82890d7] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-2-25x);
     padding: 0
@@ -241,7 +241,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-50x)
     );
 }
-& .label[data-v-6eda26d0] {
+& .label[data-v-f82890d7] {
       padding: 0 var(--kds-spacing-container-0-25x);
 }
 }
@@ -427,3 +427,88 @@ html.kds-legacy {
 }
 }
 }
+
+/** see: https://github.com/whatwg/html/issues/7732  */
+body:has(dialog.modal[open]) {
+  overflow: hidden;
+}
+
+.base-modal {
+&[data-v-6203f1f2] {
+  /* rule is broken it complains about local variables for no reason */
+  /* stylelint-disable csstools/value-no-unknown-custom-properties */
+  --modal-full-size: 95%;
+  --modal-padding-left: var(--kds-spacing-container-1-5x);
+  --modal-padding-right: var(--kds-spacing-container-1-5x);
+  --modal-padding-top: var(--kds-spacing-container-0-5x);
+  --modal-padding-bottom: var(--kds-spacing-container-1x);
+  --modal-gap: var(--kds-spacing-container-1x);
+
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  width: min(var(--modal-full-size), var(--d0cb9b20));
+  height: var(--v41dd21bd);
+  max-height: var(--modal-full-size);
+  padding: 0;
+  overflow: hidden;
+  font: var(--kds-font-base-body-medium);
+  color: var(--kds-color-text-and-icon-neutral);
+  background-color: var(--kds-color-surface-default);
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-37x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-6203f1f2]:not([open]) {
+    display: none;
+}
+&[data-v-6203f1f2]:focus-visible,
+  &[data-v-6203f1f2]:focus {
+    outline: none;
+}
+&[data-v-6203f1f2]::backdrop {
+    background: var(--kds-color-blanket-default);
+}
+& .modal-header {
+&[data-v-6203f1f2] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-5x);
+    align-items: center;
+    padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x)
+      var(--kds-spacing-container-0-5x) var(--kds-spacing-container-1-5x);
+    font: var(--kds-font-base-title-medium-strong);
+    color: var(--kds-color-text-and-icon-neutral);
+}
+& .modal-header-title[data-v-6203f1f2] {
+      flex: 1 1 auto;
+}
+}
+& .modal-body {
+&[data-v-6203f1f2] {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    font: var(--kds-font-base-body-medium);
+    color: var(--kds-color-text-and-icon-neutral);
+}
+&.modal-body-variant-default[data-v-6203f1f2] {
+      gap: var(--modal-gap);
+      padding: var(--modal-padding-top) var(--modal-padding-right)
+        var(--modal-padding-bottom) var(--modal-padding-left);
+      overflow-y: auto; /* scroll if needed */
+      overscroll-behavior: contain;
+}
+}
+& .modal-footer[data-v-6203f1f2] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-5x);
+    justify-content: right;
+    padding: var(--kds-spacing-container-1x) var(--kds-spacing-container-1-5x);
+}
+}
+
+.ask-again[data-v-14083a4d] {
+  padding: var(--kds-spacing-container-0-5x) 0 0 0;
+}
+.flush-left[data-v-14083a4d] {
+  margin-right: auto;
+}

package/dist/index.d.ts

@@ -3,9 +3,13 @@ export { default as KdsLinkButton } from './Button/KdsLinkButton.vue';
 export { default as KdsCheckbox } from './Checkbox/KdsCheckbox.vue';
 export { default as KdsIcon } from './Icon/KdsIcon.vue';
 export { default as KdsDataType } from './Icon/KdsDataType.vue';
+export { default as KdsModal } from './Modal/KdsModal.vue';
+export { default as KdsConfirmDialog } from './Modal/KdsConfirmDialog.vue';
+export * from './Modal/useKdsConfirmDialog';
 export type * from './Button/types';
 export type * from './Checkbox/types';
 export type * from './Icon/types';
+export type * from './Modal/types';
 export * from './util';
 export type * from './util';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGhE,mBAAmB,gBAAgB,CAAC;AACpC,mBAAmB,kBAAkB,CAAC;AACtC,mBAAmB,cAAc,CAAC;AAGlC,cAAc,QAAQ,CAAC;AAGvB,mBAAmB,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAC3E,cAAc,6BAA6B,CAAC;AAG5C,mBAAmB,gBAAgB,CAAC;AACpC,mBAAmB,kBAAkB,CAAC;AACtC,mBAAmB,cAAc,CAAC;AAClC,mBAAmB,eAAe,CAAC;AAGnC,cAAc,QAAQ,CAAC;AAGvB,mBAAmB,QAAQ,CAAC"}