@qxs-bns/components 0.0.11 → 0.0.13

package/lib/theme-chalk/tiny-mce-editor.scss

@@ -0,0 +1,23 @@
+@use "mixins/mixins" as *;
+
+@include b(tiny-mce-editor) {
+  :deep(.tox-tinymce) {
+    border-width: 1px;
+    border-radius: 4px;
+
+    .tox-editor-header {
+      box-shadow:
+        0 2px 2px -2px rgb(34 47 62 / 10%),
+        0 4px 4px -4px rgb(34 47 62 / 7%);
+    }
+
+    :deep(.tox-sidebar-wrap) {
+      max-height: 600px;
+      overflow-y: auto;
+    }
+  }
+}
+
+.tox-tinymce-aux {
+  z-index: 2500 !important;
+}

package/lib/theme-chalk/var.css

@@ -0,0 +1,129 @@
+@charset "UTF-8";
+/* Element Chalk Variables */
+/* stylelint-disable no-duplicate-selectors */
+:root {
+  --qxs-color-white: #fff;
+  --qxs-color-black: #000;
+  --qxs-color-primary-rgb: 227;
+  --qxs-color-success-rgb: 58;
+  --qxs-color-warning-rgb: 60;
+  --qxs-color-danger-rgb: 108;
+  --qxs-color-error-rgb: 108;
+  --qxs-color-info-rgb: 153;
+  --qxs-font-size-extra-large: 20px;
+  --qxs-font-size-large: 18px;
+  --qxs-font-size-medium: 16px;
+  --qxs-font-size-base: 14px;
+  --qxs-font-size-small: 13px;
+  --qxs-font-size-extra-small: 12px;
+  --qxs-font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  --qxs-font-weight-primary: 500;
+  --qxs-font-line-height-primary: 24px;
+  --qxs-index-normal: 1;
+  --qxs-index-top: 1000;
+  --qxs-index-popper: 2000;
+  --qxs-border-radius-base: 4px;
+  --qxs-border-radius-small: 2px;
+  --qxs-border-radius-round: 20px;
+  --qxs-border-radius-circle: 100%;
+  --qxs-transition-duration: 0.3s;
+  --qxs-transition-duration-fast: 0.2s;
+  --qxs-transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --qxs-transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1);
+  --qxs-transition-all: all var(--qxs-transition-duration) var(--qxs-transition-function-ease-in-out-bezier);
+  --qxs-transition-fade: opacity var(--qxs-transition-duration) var(--qxs-transition-function-fast-bezier);
+  --qxs-transition-md-fade: transform var(--qxs-transition-duration) var(--qxs-transition-function-fast-bezier), opacity var(--qxs-transition-duration) var(--qxs-transition-function-fast-bezier);
+  --qxs-transition-fade-linear: opacity var(--qxs-transition-duration-fast) linear;
+  --qxs-transition-border: border-color var(--qxs-transition-duration-fast) var(--qxs-transition-function-ease-in-out-bezier);
+  --qxs-transition-box-shadow: box-shadow var(--qxs-transition-duration-fast) var(--qxs-transition-function-ease-in-out-bezier);
+  --qxs-transition-color: color var(--qxs-transition-duration-fast) var(--qxs-transition-function-ease-in-out-bezier);
+  --qxs-component-size-large: 40px;
+  --qxs-component-size: 32px;
+  --qxs-component-size-small: 24px;
+}
+
+:root {
+  color-scheme: light;
+  --qxs-color-primary: #3d61e3;
+  --qxs-color-primary-light-3: rgb(119.2, 144.4, 235.4);
+  --qxs-color-primary-light-5: #9eb0f1;
+  --qxs-color-primary-light-7: rgb(196.8, 207.6, 246.6);
+  --qxs-color-primary-light-8: rgb(216.2, 223.4, 249.4);
+  --qxs-color-primary-light-9: rgb(235.6, 239.2, 252.2);
+  --qxs-color-primary-dark-2: rgb(48.8, 77.6, 181.6);
+  --qxs-color-success: #67c23a;
+  --qxs-color-success-light-3: rgb(148.6, 212.3, 117.1);
+  --qxs-color-success-light-5: rgb(179, 224.5, 156.5);
+  --qxs-color-success-light-7: rgb(209.4, 236.7, 195.9);
+  --qxs-color-success-light-8: rgb(224.6, 242.8, 215.6);
+  --qxs-color-success-light-9: rgb(239.8, 248.9, 235.3);
+  --qxs-color-success-dark-2: rgb(82.4, 155.2, 46.4);
+  --qxs-color-warning: #e6a23c;
+  --qxs-color-warning-light-3: rgb(237.5, 189.9, 118.5);
+  --qxs-color-warning-light-5: rgb(242.5, 208.5, 157.5);
+  --qxs-color-warning-light-7: rgb(247.5, 227.1, 196.5);
+  --qxs-color-warning-light-8: rgb(250, 236.4, 216);
+  --qxs-color-warning-light-9: rgb(252.5, 245.7, 235.5);
+  --qxs-color-warning-dark-2: rgb(184, 129.6, 48);
+  --qxs-color-danger: #f56c6c;
+  --qxs-color-danger-light-3: rgb(248, 152.1, 152.1);
+  --qxs-color-danger-light-5: rgb(250, 181.5, 181.5);
+  --qxs-color-danger-light-7: rgb(252, 210.9, 210.9);
+  --qxs-color-danger-light-8: rgb(253, 225.6, 225.6);
+  --qxs-color-danger-light-9: rgb(254, 240.3, 240.3);
+  --qxs-color-danger-dark-2: rgb(196, 86.4, 86.4);
+  --qxs-color-error: #f56c6c;
+  --qxs-color-error-light-3: rgb(248, 152.1, 152.1);
+  --qxs-color-error-light-5: rgb(250, 181.5, 181.5);
+  --qxs-color-error-light-7: rgb(252, 210.9, 210.9);
+  --qxs-color-error-light-8: rgb(253, 225.6, 225.6);
+  --qxs-color-error-light-9: rgb(254, 240.3, 240.3);
+  --qxs-color-error-dark-2: rgb(196, 86.4, 86.4);
+  --qxs-color-info: #909399;
+  --qxs-color-info-light-3: rgb(177.3, 179.4, 183.6);
+  --qxs-color-info-light-5: rgb(199.5, 201, 204);
+  --qxs-color-info-light-7: rgb(221.7, 222.6, 224.4);
+  --qxs-color-info-light-8: rgb(232.8, 233.4, 234.6);
+  --qxs-color-info-light-9: rgb(243.9, 244.2, 244.8);
+  --qxs-color-info-dark-2: rgb(115.2, 117.6, 122.4);
+  --qxs-bg-color: #fff;
+  --qxs-bg-color-page: #f2f3f5;
+  --qxs-bg-color-overlay: #fff;
+  --qxs-text-color-primary: #303133;
+  --qxs-text-color-regular: #606266;
+  --qxs-text-color-secondary: #909399;
+  --qxs-text-color-placeholder: #a8abb2;
+  --qxs-text-color-disabled: #c0c4cc;
+  --qxs-border-color: #dcdfe6;
+  --qxs-border-color-light: #e4e7ed;
+  --qxs-border-color-lighter: #ebeef5;
+  --qxs-border-color-extra-light: #f2f6fc;
+  --qxs-border-color-dark: #d4d7de;
+  --qxs-border-color-darker: #cdd0d6;
+  --qxs-fill-color: #f0f2f5;
+  --qxs-fill-color-light: #f5f7fa;
+  --qxs-fill-color-lighter: #fafafa;
+  --qxs-fill-color-extra-light: #fafcff;
+  --qxs-fill-color-dark: #ebedf0;
+  --qxs-fill-color-darker: #e6e8eb;
+  --qxs-fill-color-blank: #fff;
+  --qxs-box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.08);
+  --qxs-box-shadow-light: 0 0 12px rgba(0, 0, 0, 0.12);
+  --qxs-box-shadow-lighter: 0 0 6px rgba(0, 0, 0, 0.12);
+  --qxs-box-shadow-dark: 0 16px 48px 16px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.12), 0 8px 16px -8px rgba(0, 0, 0, 0.16);
+  --qxs-disabled-bg-color: var(--qxs-fill-color-light);
+  --qxs-disabled-text-color: var(--qxs-text-color-placeholder);
+  --qxs-disabled-border-color: var(--qxs-border-color-light);
+  --qxs-overlay-color: rgba(0, 0, 0, 0.8);
+  --qxs-overlay-color-light: rgba(0, 0, 0, 0.7);
+  --qxs-overlay-color-lighter: rgba(0, 0, 0, 0.5);
+  --qxs-mask-color: rgba(255, 255, 255, 0.9);
+  --qxs-mask-color-extra-light: rgba(255, 255, 255, 0.3);
+  --qxs-border-width: 1px;
+  --qxs-border-style: solid;
+  --qxs-border-color-hover: var(--qxs-text-color-disabled);
+  --qxs-border: var(--qxs-border-width) var(--qxs-border-style) var(--qxs-border-color);
+  --qxs-svg-monochrome-grey: var(--qxs-border-color);
+}
+
+/* stylelint-enable no-duplicate-selectors */

package/lib/theme-chalk/var.scss

@@ -0,0 +1,87 @@
+// CSS3 var
+@use "common/var" as *;
+@use "mixins/var" as *;
+@use "mixins/mixins" as *;
+
+// for better performance do not dynamically change the root variable if you really
+// do not need that, since this could introduce recalculation overhead for rendering.
+// https://lisilinhart.info/posts/css-variables-performance/
+
+// common
+/* stylelint-disable no-duplicate-selectors */
+:root {
+  @include set-css-var-value("color-white", $color-white);
+  @include set-css-var-value("color-black", $color-black);
+
+  // get rgb
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-rgb($type);
+  }
+
+  // Typography
+  @include set-component-css-var("font-size", $font-size);
+  @include set-component-css-var("font-family", $font-family);
+  @include set-css-var-value("font-weight-primary", 500);
+  @include set-css-var-value("font-line-height-primary", 24px);
+
+  // z-index --qxs-index-#{$type}
+  @include set-component-css-var("index", $z-index);
+
+  // --qxs-border-radius-#{$type}
+  @include set-component-css-var("border-radius", $border-radius);
+
+  // Transition
+  // refer to this website to get the bezier motion function detail
+  // https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
+  @include set-component-css-var("transition-duration", $transition-duration);
+  @include set-component-css-var("transition-function", $transition-function);
+  @include set-component-css-var("transition", $transition);
+
+  // common component size
+  @include set-component-css-var("component-size", $common-component-size);
+}
+
+// for light
+:root {
+  color-scheme: light;
+
+  // --qxs-color-#{$type}
+  // --qxs-color-#{$type}-light-{$i}
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-type($colors, $type);
+  }
+
+  // color-scheme
+  // Background --qxs-bg-color-#{$type}
+  @include set-component-css-var("bg-color", $bg-color);
+  // --qxs-text-color-#{$type}
+  @include set-component-css-var("text-color", $text-color);
+  // --qxs-border-color-#{$type}
+  @include set-component-css-var("border-color", $border-color);
+  // Fill --qxs-fill-color-#{$type}
+  @include set-component-css-var("fill-color", $fill-color);
+
+  // Box-shadow
+  // --qxs-box-shadow-#{$type}
+  @include set-component-css-var("box-shadow", $box-shadow);
+  // Disable base
+  @include set-component-css-var("disabled", $disabled);
+
+  // overlay & mask
+  @include set-component-css-var("overlay-color", $overlay-color);
+  @include set-component-css-var("mask-color", $mask-color);
+
+  // Border
+  @include set-css-var-value("border-width", $border-width);
+  @include set-css-var-value("border-style", $border-style);
+  @include set-css-var-value("border-color-hover", $border-color-hover);
+  @include set-css-var-value(
+    "border",
+    getCssVar("border-width") getCssVar("border-style")
+    getCssVar("border-color")
+  );
+
+  // Svg
+  @include css-var-from-global("svg-monochrome-grey", "border-color");
+}
+/* stylelint-enable no-duplicate-selectors */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qxs-bns/components",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "types": "es/index.d.ts",
@@ -21,8 +21,8 @@
     "./*": "./*"
   },
   "files": [
-    "index.ts",
-    "src",
+    "es",
+    "lib",
     "theme-chalk"
   ],
   "license": "MIT",
@@ -42,9 +42,6 @@
   ],
   "type": "module",
   "description": "Vue 3 Component Library",
-  "sideEffects": [
-    "src/**/*"
-  ],
   "peerDependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "element-plus": "^2.9.4",
@@ -54,10 +51,10 @@
     "@qxs-bns/directives": "latest",
     "@qxs-bns/hooks": "latest",
     "@qxs-bns/utils": "latest",
-    "@types/lodash-es": "^4.17.12",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
     "@vitejs/plugin-vue": "^5.2.1"
   }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 qxs-bns
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.