@metadev/daga 1.5.7 → 3.0.0

package/assets/styles/_palette.scss

@@ -1,20 +0,0 @@
-daga-palette {
-  .daga-palette-view {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    padding: 1rem;
-  }
-  .daga-panel.daga-bottom .daga-palette-view {
-    flex-direction: column;
-  }
-  .daga-panel.daga-top .daga-palette-view {
-    flex-direction: column-reverse;
-  }
-  .daga-panel.daga-right .daga-palette-view {
-    flex-direction: row;
-  }
-  .daga-panel.daga-left .daga-palette-view {
-    flex-direction: row-reverse;
-  }
-}

package/assets/styles/_property-editor.scss

@@ -1,285 +0,0 @@
-daga-property-editor {
-  .daga-title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 0;
-    width: 100%;
-    font-size: 1rem;
-    font-weight: 500;
-  }
-  .daga-panel-content {
-    padding: 1rem;
-  }
-  .daga-property {
-    color: var(--daga-font-color);
-    background-color: var(--daga-panel-background-color);
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    box-sizing: border-box;
-    .daga-property-name {
-      button {
-        margin-left: 0.25rem;
-      }
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      height: 1.5rem;
-      padding-bottom: 0.5rem;
-      margin: 0;
-      width: 100%;
-      font-size: 0.75rem;
-      font-weight: 500;
-    }
-    :disabled,
-    .daga-disabled {
-      color: var(--daga-font-color-disabled);
-    }
-    .daga-input,
-    input,
-    select {
-      height: 1.5rem;
-      flex-grow: 1;
-      flex-basis: 0;
-    }
-    .daga-property-value,
-    input,
-    select {
-      padding: var(--daga-property-input-padding);
-    }
-    .daga-property-value,
-    input,
-    select,
-    textarea {
-      border-radius: var(--daga-property-border-radius);
-      box-sizing: border-box;
-      font-family: var(--daga-monospace-font-family);
-      width: 100%;
-    }
-    textarea {
-      height: 5rem;
-      padding: var(--daga-property-input-padding);
-      resize: none;
-    }
-    .daga-property-value,
-    input,
-    select,
-    textarea,
-    button,
-    .daga-radio-item {
-      background-color: var(--daga-property-background-color);
-      border: 1px solid var(--daga-property-border-color);
-      font-weight: 500;
-      font-size: 0.8rem;
-    }
-    .daga-radio {
-      @extend .daga-input;
-      display: flex;
-      flex-direction: row;
-      input {
-        margin: 0;
-        height: 100%;
-      }
-      .daga-radio-item {
-        text-align: center;
-        padding: 0.2rem;
-        width: 50%;
-        cursor: pointer;
-        input {
-          display: none;
-        }
-      }
-      .daga-radio-item:has(:checked) {
-        color: var(--daga-property-selected-color);
-        background-color: var(--daga-property-selected-background-color);
-      }
-      .daga-radio-item.daga-radio-start {
-        border-bottom-left-radius: var(--daga-property-border-radius);
-        border-top-left-radius: var(--daga-property-border-radius);
-      }
-      .daga-radio-item.daga-radio-end {
-        border-bottom-right-radius: var(--daga-property-border-radius);
-        border-top-right-radius: var(--daga-property-border-radius);
-      }
-    }
-    p.daga-value-item {
-      @extend .daga-input;
-      margin: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .daga-value-item-input {
-      display: flex;
-      align-items: stretch;
-      flex-direction: row;
-      height: 1.5rem;
-      gap: 0.5rem;
-    }
-    .daga-value-item-element {
-      @extend .daga-value-item-input;
-      margin-bottom: 0.5rem;
-    }
-  }
-
-  .daga-autocomplete {
-    .daga-autocomplete-input {
-      position: relative;
-    }
-    .daga-autocomplete-options {
-      visibility: hidden;
-      .daga-autocomplete-option-list {
-        position: absolute;
-        width: 100%;
-        z-index: 2;
-        background-color: #ffffff;
-        border: 1px solid var(--daga-property-border-color);
-        border-radius: 0 0 var(--daga-property-border-radius)
-          var(--daga-property-border-radius);
-        max-height: 10rem;
-        box-sizing: border-box;
-        overflow: auto;
-        list-style-type: none;
-        padding: 0;
-        margin: 0;
-        .daga-autocomplete-option {
-          .daga-match {
-            font-weight: bold;
-          }
-          padding: var(--daga-property-input-padding);
-          cursor: pointer;
-        }
-        .daga-autocomplete-option.focused {
-          background-color: var(--daga-property-background-color);
-        }
-        .daga-autocomplete-option.no-options {
-          font-style: italic;
-          color: var(--daga-font-color-disabled);
-          cursor: default;
-        }
-      }
-    }
-  }
-  .daga-autocomplete.daga-showing-options {
-    input {
-      border-radius: var(--daga-property-border-radius)
-        var(--daga-property-border-radius) 0 0;
-    }
-    .daga-autocomplete-options {
-      visibility: visible;
-    }
-  }
-
-  .daga-left-bar {
-    padding-left: 1rem;
-    border-left: 0.25rem solid var(--daga-property-background-color);
-  }
-
-  .daga-property-value {
-    height: 1.5rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    cursor: default;
-    user-select: none;
-  }
-
-  button.daga-property-button {
-    .daga-icon {
-      background-size: contain;
-      margin: 0.25rem;
-      width: 1rem;
-      height: 1rem;
-    }
-    .daga-move-icon {
-      background-image: url(../icon/property/move.svg);
-    }
-    .daga-hide-icon {
-      background-image: url(../icon/property/hide.svg);
-    }
-    .daga-close-icon {
-      background-image: url(../icon/property/close.svg);
-    }
-    .daga-add-icon {
-      background-image: url(../icon/property/add.svg);
-    }
-    .daga-settings-icon {
-      background-image: url(../icon/property/gear.svg);
-    }
-    min-width: 1.5rem;
-    min-height: 1.5rem;
-    width: 1.5rem;
-    height: 1.5rem;
-    padding: 0;
-    border-radius: 0.25rem;
-    border: none;
-    background-color: transparent;
-    font-size: 1rem;
-  }
-  button.daga-property-button:hover {
-    background-color: var(--daga-property-background-color);
-  }
-  button.daga-clear {
-    position: absolute;
-    top: 0;
-    right: 0;
-    min-width: 1.5rem;
-    min-height: 1.5rem;
-    width: 1.5rem;
-    height: 1.5rem;
-    padding: 0;
-    border-radius: 0.25rem;
-    border: none;
-    background-color: transparent;
-    background: url(../icon/action/filter-clear.png) no-repeat;
-    background-size: 0.5rem 0.5rem;
-    background-position: 0.5rem 0.5rem;
-    z-index: 1;
-  }
-
-  .daga-relatively-positioned {
-    position: relative;
-  }
-
-  .daga-rotate {
-    transform: rotate(0deg);
-    animation-name: rotate-animation;
-    animation-duration: 0.5s;
-  }
-  .daga-unrotate {
-    transform: rotate(30deg);
-    animation-name: unrotate-animation;
-    animation-duration: 0.5s;
-  }
-  @keyframes rotate-animation {
-    from {
-      transform: rotate(30deg);
-    }
-    to {
-      transform: rotate(0deg);
-    }
-  }
-  @keyframes unrotate-animation {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(30deg);
-    }
-  }
-}
-
-daga-property-settings {
-  .daga-property {
-    padding: 0.5rem;
-    margin: 0.5rem 0;
-    border-radius: 0.5rem;
-    border: 1px solid var(--daga-property-border-color);
-  }
-  .daga-dropbar {
-    visibility: collapse;
-    width: 100%;
-    border-radius: 0.125rem;
-    background-color: var(--daga-property-border-color);
-    margin: 0.5rem 0;
-  }
-}

package/assets/styles/daga.scss

@@ -1,150 +0,0 @@
-@import 'collapse-button.scss';
-@import 'context-menu.scss';
-@import 'diagram-buttons.scss';
-@import 'diagram.scss';
-@import 'errors.scss';
-@import 'palette.scss';
-@import 'property-editor.scss';
-
-:root {
-  --daga-font-color: #233154;
-  --daga-font-color-disabled: #808080;
-  --daga-panel-background-color: #ffffff;
-  --daga-panel-secondary-color: #f7f8fc;
-  --daga-panel-border-color: #e6e6e6;
-  --daga-property-background-color: #f5f8fa;
-  --daga-property-border-color: #e1e4ff;
-  --daga-property-selected-color: #ffffff;
-  --daga-property-selected-background-color: #0095f9;
-  --daga-property-disabled-color: var(--daga-property-background-color);
-  --daga-property-border-radius: 0.25rem;
-  --daga-property-input-padding: 0.2rem 0.5rem;
-  --daga-error-color: #ff6363;
-
-  --daga-primary-font-family: 'WonderUnitSans', sans-serif;
-  --daga-monospace-font-family: 'DMMono', monospace;
-}
-
-@font-face {
-  font-display: block;
-  font-family: 'WonderUnitSans';
-  font-style: normal;
-  font-weight: normal;
-  src:
-    url('../fonts/WonderUnitSans-Medium.woff2') format('woff2'),
-    url('../fonts/WonderUnitSans-Medium.woff') format('woff'),
-    url('../fonts/WonderUnitSans-Medium.ttf') format('truetype');
-  font-display: swap;
-}
-@font-face {
-  font-display: block;
-  font-family: 'DMMono';
-  font-style: normal;
-  font-weight: normal;
-  src:
-    url('../fonts/DMMono-Medium.woff2') format('woff2'),
-    url('../fonts/DMMono-Medium.woff') format('woff'),
-    url('../fonts/DMMono-Medium.ttf') format('truetype');
-  font-display: swap;
-}
-
-daga-diagram {
-  div,
-  p,
-  li,
-  button,
-  input,
-  option {
-    font-family: var(--daga-primary-font-family);
-  }
-  code {
-    font-family: var(--daga-monospace-font-family);
-  }
-
-  .prevent-user-select {
-    user-select: none;
-  }
-
-  .daga-top-left {
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
-  .daga-top-right {
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-  .daga-bottom-left {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-  }
-  .daga-bottom-right {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-  }
-
-  .daga-panel {
-    background-color: var(--daga-panel-secondary-color);
-    border: 1px solid var(--daga-panel-border-color);
-    border-radius: 1rem;
-    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
-    display: flex;
-    flex-direction: column;
-    margin: 1rem;
-    max-height: calc(100% - 2rem);
-    max-width: calc(100% - 2rem);
-    .daga-collapse-button.daga-bottom {
-      border-radius: 0.75rem 0.75rem 0 0;
-    }
-    .daga-collapse-button.daga-top {
-      border-radius: 0 0 0.75rem 0.75rem;
-    }
-    .daga-collapse-button.daga-right {
-      border-radius: 0.75rem 0 0 0.75rem;
-    }
-    .daga-collapse-button.daga-left {
-      border-radius: 0 0.75rem 0.75rem 0;
-    }
-    .daga-panel-content {
-      background-color: var(--daga-panel-background-color);
-      border: 0;
-      border-radius: 1rem;
-      flex: 1 1 auto;
-      overflow: auto;
-    }
-    .daga-panel-tabs {
-      background-color: var(--daga-panel-secondary-color);
-      display: flex;
-      flex-direction: row;
-      overflow-x: auto;
-      padding-top: 0.5rem;
-      .daga-panel-tab {
-        flex-grow: 1;
-        flex-shrink: 0;
-        padding: 0.5rem;
-        text-align: center;
-        user-select: none;
-      }
-      .daga-panel-tab.current-tab {
-        background-color: var(--daga-panel-background-color);
-        border-top-left-radius: 0.5rem;
-        border-top-right-radius: 0.5rem;
-      }
-    }
-  }
-  .daga-panel.daga-bottom {
-    flex-direction: column;
-  }
-  .daga-panel.daga-top {
-    flex-direction: column-reverse;
-  }
-  .daga-panel.daga-right {
-    flex-direction: row;
-  }
-  .daga-panel.daga-left {
-    flex-direction: row-reverse;
-  }
-}