@cst-ui/nano-buttons 0.2.2 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +267 -219
- package/dist/NanoTextAddButton.vue_vue_type_script_setup_true_lang-CYuxrToE.js +219 -0
- package/dist/NanoTextAddButton.vue_vue_type_script_setup_true_lang-DIaonSsx.cjs +1 -0
- package/dist/buttons/index.cjs +1 -1
- package/dist/buttons/index.mjs +32 -235
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +19 -2
- package/dist/index.mjs +36 -16
- package/dist/style.css +1 -1
- package/dist/table/CstPagination.vue.d.ts +64 -0
- package/dist/table/CstTable.vue.d.ts +47 -0
- package/dist/table/index.cjs +1 -0
- package/dist/table/index.d.ts +7 -0
- package/dist/table/index.mjs +136 -0
- package/package.json +74 -66
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--nano-font-size-sm: var(--font-size-sm, 14px);--nano-font-size-lg: var(--font-size-lg, 18px);--nano-font-weight-medium: var(--font-weight-medium, 500);--nano-radius-md: var(--radius-md, 6px);--nano-shadow-card: var(--shadow-card, 0 2px 12px rgba(0, 0, 0, .12));--nano-color-brand-primary: var(--color-brand-primary, #243c96);--nano-color-brand-primary-hover: var(--color-brand-primary-hover, #3550b3);--nano-color-brand-primary-active: var(--color-brand-primary-active, #1b2f78);--nano-color-brand-primary-light: var(--color-brand-primary-light, #eef2ff);--nano-color-text-regular: var(--color-text-regular, #606266);--nano-color-text-on-brand: var(--color-text-on-brand, #ffffff);--nano-color-border-default: var(--color-border-default, #dcdfe6);--nano-color-success: var(--color-success, #67c23a);--nano-color-success-hover: var(--color-success-hover, #85ce61);--nano-color-success-active: var(--color-success-active, #529b2e);--nano-color-warning: var(--color-warning, #e6a23c);--nano-color-warning-hover: var(--color-warning-hover, #ebb563);--nano-color-warning-active: var(--color-warning-active, #b88230);--nano-color-danger: var(--color-danger, #d35a5a);--nano-color-danger-hover: var(--color-danger-hover, #e07272);--nano-color-danger-active: var(--color-danger-active, #bc4949);--nano-color-info: var(--color-info, #909399);--nano-color-info-hover: var(--color-info-hover, #a6a9ad);--nano-color-info-active: var(--color-info-active, #73767a);--nano-color-focus-outline: var(--color-focus-outline, rgba(36, 60, 150, .32));--nano-button-default-bg: var(--button-default-bg, #ffffff);--nano-button-default-text: var(--button-default-text, var(--nano-color-text-regular));--nano-button-default-border: var(--button-default-border, var(--nano-color-border-default));--nano-button-default-hover-bg: var(--button-default-hover-bg, var(--nano-color-brand-primary-light));--nano-button-default-hover-text: var(--button-default-hover-text, var(--nano-color-brand-primary));--nano-button-default-hover-border: var(--button-default-hover-border, var(--nano-color-brand-primary-hover));--nano-button-default-active-bg: var(--button-default-active-bg, #e0e8ff);--nano-button-default-active-text: var(--button-default-active-text, var(--nano-color-brand-primary-active));--nano-button-default-active-border: var(--button-default-active-border, var(--nano-color-brand-primary-active));--nano-button-secondary-bg: var(--button-secondary-bg, var(--nano-color-brand-primary-light));--nano-button-secondary-text: var(--button-secondary-text, var(--nano-color-brand-primary));--nano-button-secondary-border: var(--button-secondary-border, rgba(36, 60, 150, .32));--nano-button-secondary-hover-bg: var(--button-secondary-hover-bg, #e0e8ff);--nano-button-secondary-hover-text: var(--button-secondary-hover-text, var(--nano-color-brand-primary-hover));--nano-button-secondary-hover-border: var(--button-secondary-hover-border, var(--nano-color-brand-primary-hover));--nano-button-secondary-active-bg: var(--button-secondary-active-bg, #d4defd);--nano-button-secondary-active-text: var(--button-secondary-active-text, var(--nano-color-brand-primary-active));--nano-button-secondary-active-border: var(--button-secondary-active-border, var(--nano-color-brand-primary-active));--nano-button-import-bg: var(--button-import-bg, #edf5f3);--nano-button-import-text: var(--button-import-text, #2f6b57);--nano-button-import-border: var(--button-import-border, rgba(47, 107, 87, .2));--nano-button-import-hover-bg: var(--button-import-hover-bg, #e0f0ec);--nano-button-import-hover-text: var(--button-import-hover-text, #285c4b);--nano-button-import-hover-border: var(--button-import-hover-border, rgba(47, 107, 87, .36));--nano-button-import-active-bg: var(--button-import-active-bg, #d3e8e2);--nano-button-import-active-text: var(--button-import-active-text, #224f40);--nano-button-import-active-border: var(--button-import-active-border, rgba(47, 107, 87, .48));--nano-button-export-bg: var(--button-export-bg, #edf5f3);--nano-button-export-text: var(--button-export-text, #2f6b57);--nano-button-export-border: var(--button-export-border, rgba(47, 107, 87, .2));--nano-button-export-hover-bg: var(--button-export-hover-bg, #e0f0ec);--nano-button-export-hover-text: var(--button-export-hover-text, #285c4b);--nano-button-export-hover-border: var(--button-export-hover-border, rgba(47, 107, 87, .36));--nano-button-export-active-bg: var(--button-export-active-bg, #d3e8e2);--nano-button-export-active-text: var(--button-export-active-text, #224f40);--nano-button-export-active-border: var(--button-export-active-border, rgba(47, 107, 87, .48));--nano-button-text-default: var(--button-text-default, var(--nano-color-text-regular));--nano-button-text-hover-bg: var(--button-text-hover-bg, var(--nano-color-brand-primary-light));--nano-button-text-hover: var(--button-text-hover, var(--nano-color-brand-primary));--nano-button-text-active: var(--button-text-active, var(--nano-color-brand-primary-active));--nano-button-hover-shadow: var(--button-hover-shadow, 0 4px 12px rgba(36, 60, 150, .16));--nano-button-default-hover-shadow: var(--button-default-hover-shadow, 0 2px 10px rgba(36, 60, 150, .12));--nano-button-danger-hover-shadow: var(--button-danger-hover-shadow, 0 4px 12px rgba(211, 90, 90, .18))}html.dark{--nano-button-import-bg: var(--button-import-bg, rgba(80, 160, 120, .16));--nano-button-import-text: var(--button-import-text, #8dd3b1);--nano-button-import-border: var(--button-import-border, rgba(80, 160, 120, .28));--nano-button-import-hover-bg: var(--button-import-hover-bg, rgba(80, 160, 120, .24));--nano-button-import-hover-text: var(--button-import-hover-text, #a6e2c4);--nano-button-import-hover-border: var(--button-import-hover-border, rgba(80, 160, 120, .42));--nano-button-import-active-bg: var(--button-import-active-bg, rgba(80, 160, 120, .32));--nano-button-import-active-text: var(--button-import-active-text, #8dd3b1);--nano-button-import-active-border: var(--button-import-active-border, rgba(80, 160, 120, .56));--nano-button-export-bg: var(--button-export-bg, rgba(80, 160, 120, .16));--nano-button-export-text: var(--button-export-text, #8dd3b1);--nano-button-export-border: var(--button-export-border, rgba(80, 160, 120, .28));--nano-button-export-hover-bg: var(--button-export-hover-bg, rgba(80, 160, 120, .24));--nano-button-export-hover-text: var(--button-export-hover-text, #a6e2c4);--nano-button-export-hover-border: var(--button-export-hover-border, rgba(80, 160, 120, .42));--nano-button-export-active-bg: var(--button-export-active-bg, rgba(80, 160, 120, .32));--nano-button-export-active-text: var(--button-export-active-text, #8dd3b1);--nano-button-export-active-border: var(--button-export-active-border, rgba(80, 160, 120, .56))}.el-button{--button-bg: var(--button-default-bg, var(--nano-button-default-bg));--button-text: var(--button-default-text, var(--nano-button-default-text));--button-border: var(--button-default-border, var(--nano-button-default-border));--button-bg-hover: var(--button-default-hover-bg, var(--nano-button-default-hover-bg));--button-text-hover: var(--button-default-hover-text, var(--nano-button-default-hover-text));--button-border-hover: var(--button-default-hover-border, var(--nano-button-default-hover-border));--button-bg-active: var(--button-default-active-bg, var(--nano-button-default-active-bg));--button-text-active: var(--button-default-active-text, var(--nano-button-default-active-text));--button-border-active: var(--button-default-active-border, var(--nano-button-default-active-border));--button-shadow-hover: var(--button-default-hover-shadow, var(--nano-button-default-hover-shadow));font-size:var(--font-size-sm, var(--nano-font-size-sm));font-weight:var(--font-weight-medium, var(--nano-font-weight-medium));border-radius:var(--radius-md, var(--nano-radius-md));transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,opacity .22s ease}.el-button:focus-visible{outline:2px solid var(--color-focus-outline, var(--nano-color-focus-outline));outline-offset:2px}.el-button.is-disabled,.el-button.is-disabled:hover,.el-button.is-disabled:active{box-shadow:none}.el-button:not(.is-text):not(.is-link){--el-button-text-color: var(--button-text);--el-button-bg-color: var(--button-bg);--el-button-border-color: var(--button-border);--el-button-hover-text-color: var(--button-text-hover);--el-button-hover-bg-color: var(--button-bg-hover);--el-button-hover-border-color: var(--button-border-hover);--el-button-active-text-color: var(--button-text-active);--el-button-active-bg-color: var(--button-bg-active);--el-button-active-border-color: var(--button-border-active);color:var(--button-text);background-color:var(--button-bg);border-color:var(--button-border)}.el-button:not(.is-text):not(.is-link):hover{background-color:var(--button-bg-hover);color:var(--button-text-hover);border-color:var(--button-border-hover);box-shadow:var(--button-shadow-hover)}.el-button:not(.is-text):not(.is-link):active{background-color:var(--button-bg-active);color:var(--button-text-active);border-color:var(--button-border-active);box-shadow:none}.el-button.app-button-secondary{--button-bg: var(--button-secondary-bg, var(--nano-button-secondary-bg));--button-text: var(--button-secondary-text, var(--nano-button-secondary-text));--button-border: var(--button-secondary-border, var(--nano-button-secondary-border));--button-bg-hover: var(--button-secondary-hover-bg, var(--nano-button-secondary-hover-bg));--button-text-hover: var(--button-secondary-hover-text, var(--nano-button-secondary-hover-text));--button-border-hover: var(--button-secondary-hover-border, var(--nano-button-secondary-hover-border));--button-bg-active: var(--button-secondary-active-bg, var(--nano-button-secondary-active-bg));--button-text-active: var(--button-secondary-active-text, var(--nano-button-secondary-active-text));--button-border-active: var(--button-secondary-active-border, var(--nano-button-secondary-active-border))}.el-button.app-button-import{--button-bg: var(--button-import-bg, var(--nano-button-import-bg));--button-text: var(--button-import-text, var(--nano-button-import-text));--button-border: var(--button-import-border, var(--nano-button-import-border));--button-bg-hover: var(--button-import-hover-bg, var(--nano-button-import-hover-bg));--button-text-hover: var(--button-import-hover-text, var(--nano-button-import-hover-text));--button-border-hover: var(--button-import-hover-border, var(--nano-button-import-hover-border));--button-bg-active: var(--button-import-active-bg, var(--nano-button-import-active-bg));--button-text-active: var(--button-import-active-text, var(--nano-button-import-active-text));--button-border-active: var(--button-import-active-border, var(--nano-button-import-active-border))}.el-button.app-button-export{--button-bg: var(--button-export-bg, var(--nano-button-export-bg));--button-text: var(--button-export-text, var(--nano-button-export-text));--button-border: var(--button-export-border, var(--nano-button-export-border));--button-bg-hover: var(--button-export-hover-bg, var(--nano-button-export-hover-bg));--button-text-hover: var(--button-export-hover-text, var(--nano-button-export-hover-text));--button-border-hover: var(--button-export-hover-border, var(--nano-button-export-hover-border));--button-bg-active: var(--button-export-active-bg, var(--nano-button-export-active-bg));--button-text-active: var(--button-export-active-text, var(--nano-button-export-active-text));--button-border-active: var(--button-export-active-border, var(--nano-button-export-active-border))}.el-button.el-button--primary,.el-button.el-button--success,.el-button.el-button--warning,.el-button.el-button--danger,.el-button.el-button--info{--button-text: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-text-hover: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-text-active: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-shadow-hover: var(--button-hover-shadow, var(--nano-button-hover-shadow));box-shadow:none}.el-button.el-button--primary{--button-bg: var(--color-brand-primary, var(--nano-color-brand-primary));--button-border: var(--color-brand-primary, var(--nano-color-brand-primary));--button-bg-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-border-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-bg-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active));--button-border-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active))}.el-button.el-button--success{--button-bg: var(--color-success, var(--nano-color-success));--button-border: var(--color-success, var(--nano-color-success));--button-bg-hover: var(--color-success-hover, var(--nano-color-success-hover));--button-border-hover: var(--color-success-hover, var(--nano-color-success-hover));--button-bg-active: var(--color-success-active, var(--nano-color-success-active));--button-border-active: var(--color-success-active, var(--nano-color-success-active))}.el-button.el-button--warning{--button-bg: var(--color-warning, var(--nano-color-warning));--button-border: var(--color-warning, var(--nano-color-warning));--button-bg-hover: var(--color-warning-hover, var(--nano-color-warning-hover));--button-border-hover: var(--color-warning-hover, var(--nano-color-warning-hover));--button-bg-active: var(--color-warning-active, var(--nano-color-warning-active));--button-border-active: var(--color-warning-active, var(--nano-color-warning-active))}.el-button.el-button--danger{--button-bg: var(--color-danger, var(--nano-color-danger));--button-border: var(--color-danger, var(--nano-color-danger));--button-bg-hover: var(--color-danger-hover, var(--nano-color-danger-hover));--button-border-hover: var(--color-danger-hover, var(--nano-color-danger-hover));--button-bg-active: var(--color-danger-active, var(--nano-color-danger-active));--button-border-active: var(--color-danger-active, var(--nano-color-danger-active));--button-shadow-hover: var(--button-danger-hover-shadow, var(--nano-button-danger-hover-shadow))}.el-button.el-button--info{--button-bg: var(--color-info, var(--nano-color-info));--button-border: var(--color-info, var(--nano-color-info));--button-bg-hover: var(--color-info-hover, var(--nano-color-info-hover));--button-border-hover: var(--color-info-hover, var(--nano-color-info-hover));--button-bg-active: var(--color-info-active, var(--nano-color-info-active));--button-border-active: var(--color-info-active, var(--nano-color-info-active))}.el-button.is-text,.el-button.is-link{background-color:transparent;color:var(--button-text-default, var(--nano-button-text-default));border-color:transparent;box-shadow:none}.el-button.is-text:hover{background-color:var(--button-text-hover-bg, var(--nano-button-text-hover-bg));color:var(--button-text-hover, var(--nano-button-text-hover))}.el-button.is-link:hover,.el-button.is-text:active,.el-button.is-link:active{color:var(--button-text-active, var(--nano-button-text-active))}.app-backtop.el-backtop{width:auto;height:auto;background-color:transparent;box-shadow:none}.app-backtop.el-backtop:hover{background-color:transparent}.app-backtop-button.el-button{--button-bg: var(--color-brand-primary, var(--nano-color-brand-primary));--button-text: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-border: var(--color-brand-primary, var(--nano-color-brand-primary));--button-bg-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-text-hover: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-border-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-bg-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active));--button-text-active: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-border-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active));width:42px;height:42px;padding:0;border-radius:12px;border-width:1px;box-shadow:0 10px 22px #243c9642,inset 0 1px #ffffff2e;transform:translateY(0);transition:transform .18s ease,background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,opacity .22s ease}.app-backtop-button.el-button>span,.app-backtop-icon{display:inline-flex;align-items:center;justify-content:center}.app-backtop-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.app-backtop-button.el-button:not(.is-text):not(.is-link):hover{transform:translateY(-2px);box-shadow:0 14px 26px #243c964d,inset 0 1px #ffffff38}.app-backtop-button.el-button:not(.is-text):not(.is-link):active{transform:translateY(0);box-shadow:0 6px 14px #243c9638,inset 0 1px 2px #1b2f7847}
|
|
1
|
+
:root{--nano-font-size-sm: var(--font-size-sm, 14px);--nano-font-size-lg: var(--font-size-lg, 18px);--nano-font-weight-medium: var(--font-weight-medium, 500);--nano-radius-md: var(--radius-md, 6px);--nano-shadow-card: var(--shadow-card, 0 2px 12px rgba(0, 0, 0, .12));--nano-color-brand-primary: var(--color-brand-primary, #243c96);--nano-color-brand-primary-hover: var(--color-brand-primary-hover, #3550b3);--nano-color-brand-primary-active: var(--color-brand-primary-active, #1b2f78);--nano-color-brand-primary-light: var(--color-brand-primary-light, #eef2ff);--nano-color-text-regular: var(--color-text-regular, #606266);--nano-color-text-on-brand: var(--color-text-on-brand, #ffffff);--nano-color-border-default: var(--color-border-default, #dcdfe6);--nano-color-success: var(--color-success, #67c23a);--nano-color-success-hover: var(--color-success-hover, #85ce61);--nano-color-success-active: var(--color-success-active, #529b2e);--nano-color-warning: var(--color-warning, #e6a23c);--nano-color-warning-hover: var(--color-warning-hover, #ebb563);--nano-color-warning-active: var(--color-warning-active, #b88230);--nano-color-danger: var(--color-danger, #d35a5a);--nano-color-danger-hover: var(--color-danger-hover, #e07272);--nano-color-danger-active: var(--color-danger-active, #bc4949);--nano-color-info: var(--color-info, #909399);--nano-color-info-hover: var(--color-info-hover, #a6a9ad);--nano-color-info-active: var(--color-info-active, #73767a);--nano-color-focus-outline: var(--color-focus-outline, rgba(36, 60, 150, .32));--nano-button-default-bg: var(--button-default-bg, #ffffff);--nano-button-default-text: var(--button-default-text, var(--nano-color-text-regular));--nano-button-default-border: var(--button-default-border, var(--nano-color-border-default));--nano-button-default-hover-bg: var(--button-default-hover-bg, var(--nano-color-brand-primary-light));--nano-button-default-hover-text: var(--button-default-hover-text, var(--nano-color-brand-primary));--nano-button-default-hover-border: var(--button-default-hover-border, var(--nano-color-brand-primary-hover));--nano-button-default-active-bg: var(--button-default-active-bg, #e0e8ff);--nano-button-default-active-text: var(--button-default-active-text, var(--nano-color-brand-primary-active));--nano-button-default-active-border: var(--button-default-active-border, var(--nano-color-brand-primary-active));--nano-button-secondary-bg: var(--button-secondary-bg, var(--nano-color-brand-primary-light));--nano-button-secondary-text: var(--button-secondary-text, var(--nano-color-brand-primary));--nano-button-secondary-border: var(--button-secondary-border, rgba(36, 60, 150, .32));--nano-button-secondary-hover-bg: var(--button-secondary-hover-bg, #e0e8ff);--nano-button-secondary-hover-text: var(--button-secondary-hover-text, var(--nano-color-brand-primary-hover));--nano-button-secondary-hover-border: var(--button-secondary-hover-border, var(--nano-color-brand-primary-hover));--nano-button-secondary-active-bg: var(--button-secondary-active-bg, #d4defd);--nano-button-secondary-active-text: var(--button-secondary-active-text, var(--nano-color-brand-primary-active));--nano-button-secondary-active-border: var(--button-secondary-active-border, var(--nano-color-brand-primary-active));--nano-button-import-bg: var(--button-import-bg, #edf5f3);--nano-button-import-text: var(--button-import-text, #2f6b57);--nano-button-import-border: var(--button-import-border, rgba(47, 107, 87, .2));--nano-button-import-hover-bg: var(--button-import-hover-bg, #e0f0ec);--nano-button-import-hover-text: var(--button-import-hover-text, #285c4b);--nano-button-import-hover-border: var(--button-import-hover-border, rgba(47, 107, 87, .36));--nano-button-import-active-bg: var(--button-import-active-bg, #d3e8e2);--nano-button-import-active-text: var(--button-import-active-text, #224f40);--nano-button-import-active-border: var(--button-import-active-border, rgba(47, 107, 87, .48));--nano-button-export-bg: var(--button-export-bg, #edf5f3);--nano-button-export-text: var(--button-export-text, #2f6b57);--nano-button-export-border: var(--button-export-border, rgba(47, 107, 87, .2));--nano-button-export-hover-bg: var(--button-export-hover-bg, #e0f0ec);--nano-button-export-hover-text: var(--button-export-hover-text, #285c4b);--nano-button-export-hover-border: var(--button-export-hover-border, rgba(47, 107, 87, .36));--nano-button-export-active-bg: var(--button-export-active-bg, #d3e8e2);--nano-button-export-active-text: var(--button-export-active-text, #224f40);--nano-button-export-active-border: var(--button-export-active-border, rgba(47, 107, 87, .48));--nano-button-text-default: var(--button-text-default, var(--nano-color-text-regular));--nano-button-text-hover-bg: var(--button-text-hover-bg, var(--nano-color-brand-primary-light));--nano-button-text-hover: var(--button-text-hover, var(--nano-color-brand-primary));--nano-button-text-active: var(--button-text-active, var(--nano-color-brand-primary-active));--nano-button-hover-shadow: var(--button-hover-shadow, 0 4px 12px rgba(36, 60, 150, .16));--nano-button-default-hover-shadow: var(--button-default-hover-shadow, 0 2px 10px rgba(36, 60, 150, .12));--nano-button-danger-hover-shadow: var(--button-danger-hover-shadow, 0 4px 12px rgba(211, 90, 90, .18))}html.dark{--nano-button-import-bg: var(--button-import-bg, rgba(80, 160, 120, .16));--nano-button-import-text: var(--button-import-text, #8dd3b1);--nano-button-import-border: var(--button-import-border, rgba(80, 160, 120, .28));--nano-button-import-hover-bg: var(--button-import-hover-bg, rgba(80, 160, 120, .24));--nano-button-import-hover-text: var(--button-import-hover-text, #a6e2c4);--nano-button-import-hover-border: var(--button-import-hover-border, rgba(80, 160, 120, .42));--nano-button-import-active-bg: var(--button-import-active-bg, rgba(80, 160, 120, .32));--nano-button-import-active-text: var(--button-import-active-text, #8dd3b1);--nano-button-import-active-border: var(--button-import-active-border, rgba(80, 160, 120, .56));--nano-button-export-bg: var(--button-export-bg, rgba(80, 160, 120, .16));--nano-button-export-text: var(--button-export-text, #8dd3b1);--nano-button-export-border: var(--button-export-border, rgba(80, 160, 120, .28));--nano-button-export-hover-bg: var(--button-export-hover-bg, rgba(80, 160, 120, .24));--nano-button-export-hover-text: var(--button-export-hover-text, #a6e2c4);--nano-button-export-hover-border: var(--button-export-hover-border, rgba(80, 160, 120, .42));--nano-button-export-active-bg: var(--button-export-active-bg, rgba(80, 160, 120, .32));--nano-button-export-active-text: var(--button-export-active-text, #8dd3b1);--nano-button-export-active-border: var(--button-export-active-border, rgba(80, 160, 120, .56))}.el-button{--button-bg: var(--button-default-bg, var(--nano-button-default-bg));--button-text: var(--button-default-text, var(--nano-button-default-text));--button-border: var(--button-default-border, var(--nano-button-default-border));--button-bg-hover: var(--button-default-hover-bg, var(--nano-button-default-hover-bg));--button-text-hover: var(--button-default-hover-text, var(--nano-button-default-hover-text));--button-border-hover: var(--button-default-hover-border, var(--nano-button-default-hover-border));--button-bg-active: var(--button-default-active-bg, var(--nano-button-default-active-bg));--button-text-active: var(--button-default-active-text, var(--nano-button-default-active-text));--button-border-active: var(--button-default-active-border, var(--nano-button-default-active-border));--button-shadow-hover: var(--button-default-hover-shadow, var(--nano-button-default-hover-shadow));font-size:var(--font-size-sm, var(--nano-font-size-sm));font-weight:var(--font-weight-medium, var(--nano-font-weight-medium));border-radius:var(--radius-md, var(--nano-radius-md));transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,opacity .22s ease}.el-button:focus-visible{outline:2px solid var(--color-focus-outline, var(--nano-color-focus-outline));outline-offset:2px}.el-button.is-disabled,.el-button.is-disabled:hover,.el-button.is-disabled:active{box-shadow:none}.el-button:not(.is-text):not(.is-link){--el-button-text-color: var(--button-text);--el-button-bg-color: var(--button-bg);--el-button-border-color: var(--button-border);--el-button-hover-text-color: var(--button-text-hover);--el-button-hover-bg-color: var(--button-bg-hover);--el-button-hover-border-color: var(--button-border-hover);--el-button-active-text-color: var(--button-text-active);--el-button-active-bg-color: var(--button-bg-active);--el-button-active-border-color: var(--button-border-active);color:var(--button-text);background-color:var(--button-bg);border-color:var(--button-border)}.el-button:not(.is-text):not(.is-link):hover{background-color:var(--button-bg-hover);color:var(--button-text-hover);border-color:var(--button-border-hover);box-shadow:var(--button-shadow-hover)}.el-button:not(.is-text):not(.is-link):active{background-color:var(--button-bg-active);color:var(--button-text-active);border-color:var(--button-border-active);box-shadow:none}.el-button.app-button-secondary{--button-bg: var(--button-secondary-bg, var(--nano-button-secondary-bg));--button-text: var(--button-secondary-text, var(--nano-button-secondary-text));--button-border: var(--button-secondary-border, var(--nano-button-secondary-border));--button-bg-hover: var(--button-secondary-hover-bg, var(--nano-button-secondary-hover-bg));--button-text-hover: var(--button-secondary-hover-text, var(--nano-button-secondary-hover-text));--button-border-hover: var(--button-secondary-hover-border, var(--nano-button-secondary-hover-border));--button-bg-active: var(--button-secondary-active-bg, var(--nano-button-secondary-active-bg));--button-text-active: var(--button-secondary-active-text, var(--nano-button-secondary-active-text));--button-border-active: var(--button-secondary-active-border, var(--nano-button-secondary-active-border))}.el-button.app-button-import{--button-bg: var(--button-import-bg, var(--nano-button-import-bg));--button-text: var(--button-import-text, var(--nano-button-import-text));--button-border: var(--button-import-border, var(--nano-button-import-border));--button-bg-hover: var(--button-import-hover-bg, var(--nano-button-import-hover-bg));--button-text-hover: var(--button-import-hover-text, var(--nano-button-import-hover-text));--button-border-hover: var(--button-import-hover-border, var(--nano-button-import-hover-border));--button-bg-active: var(--button-import-active-bg, var(--nano-button-import-active-bg));--button-text-active: var(--button-import-active-text, var(--nano-button-import-active-text));--button-border-active: var(--button-import-active-border, var(--nano-button-import-active-border))}.el-button.app-button-export{--button-bg: var(--button-export-bg, var(--nano-button-export-bg));--button-text: var(--button-export-text, var(--nano-button-export-text));--button-border: var(--button-export-border, var(--nano-button-export-border));--button-bg-hover: var(--button-export-hover-bg, var(--nano-button-export-hover-bg));--button-text-hover: var(--button-export-hover-text, var(--nano-button-export-hover-text));--button-border-hover: var(--button-export-hover-border, var(--nano-button-export-hover-border));--button-bg-active: var(--button-export-active-bg, var(--nano-button-export-active-bg));--button-text-active: var(--button-export-active-text, var(--nano-button-export-active-text));--button-border-active: var(--button-export-active-border, var(--nano-button-export-active-border))}.el-button.el-button--primary,.el-button.el-button--success,.el-button.el-button--warning,.el-button.el-button--danger,.el-button.el-button--info{--button-text: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-text-hover: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-text-active: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-shadow-hover: var(--button-hover-shadow, var(--nano-button-hover-shadow));box-shadow:none}.el-button.el-button--primary{--button-bg: var(--color-brand-primary, var(--nano-color-brand-primary));--button-border: var(--color-brand-primary, var(--nano-color-brand-primary));--button-bg-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-border-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-bg-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active));--button-border-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active))}.el-button.el-button--success{--button-bg: var(--color-success, var(--nano-color-success));--button-border: var(--color-success, var(--nano-color-success));--button-bg-hover: var(--color-success-hover, var(--nano-color-success-hover));--button-border-hover: var(--color-success-hover, var(--nano-color-success-hover));--button-bg-active: var(--color-success-active, var(--nano-color-success-active));--button-border-active: var(--color-success-active, var(--nano-color-success-active))}.el-button.el-button--warning{--button-bg: var(--color-warning, var(--nano-color-warning));--button-border: var(--color-warning, var(--nano-color-warning));--button-bg-hover: var(--color-warning-hover, var(--nano-color-warning-hover));--button-border-hover: var(--color-warning-hover, var(--nano-color-warning-hover));--button-bg-active: var(--color-warning-active, var(--nano-color-warning-active));--button-border-active: var(--color-warning-active, var(--nano-color-warning-active))}.el-button.el-button--danger{--button-bg: var(--color-danger, var(--nano-color-danger));--button-border: var(--color-danger, var(--nano-color-danger));--button-bg-hover: var(--color-danger-hover, var(--nano-color-danger-hover));--button-border-hover: var(--color-danger-hover, var(--nano-color-danger-hover));--button-bg-active: var(--color-danger-active, var(--nano-color-danger-active));--button-border-active: var(--color-danger-active, var(--nano-color-danger-active));--button-shadow-hover: var(--button-danger-hover-shadow, var(--nano-button-danger-hover-shadow))}.el-button.el-button--info{--button-bg: var(--color-info, var(--nano-color-info));--button-border: var(--color-info, var(--nano-color-info));--button-bg-hover: var(--color-info-hover, var(--nano-color-info-hover));--button-border-hover: var(--color-info-hover, var(--nano-color-info-hover));--button-bg-active: var(--color-info-active, var(--nano-color-info-active));--button-border-active: var(--color-info-active, var(--nano-color-info-active))}.el-button.is-text,.el-button.is-link{background-color:transparent;color:var(--button-text-default, var(--nano-button-text-default));border-color:transparent;box-shadow:none}.el-button.is-text:hover{background-color:var(--button-text-hover-bg, var(--nano-button-text-hover-bg));color:var(--button-text-hover, var(--nano-button-text-hover))}.el-button.is-link:hover,.el-button.is-text:active,.el-button.is-link:active{color:var(--button-text-active, var(--nano-button-text-active))}.app-backtop.el-backtop{width:auto;height:auto;background-color:transparent;box-shadow:none}.app-backtop.el-backtop:hover{background-color:transparent}.app-backtop-button.el-button{--button-bg: var(--color-brand-primary, var(--nano-color-brand-primary));--button-text: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-border: var(--color-brand-primary, var(--nano-color-brand-primary));--button-bg-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-text-hover: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-border-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-bg-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active));--button-text-active: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-border-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active));width:42px;height:42px;padding:0;border-radius:12px;border-width:1px;box-shadow:0 10px 22px #243c9642,inset 0 1px #ffffff2e;transform:translateY(0);transition:transform .18s ease,background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,opacity .22s ease}.app-backtop-button.el-button>span,.app-backtop-icon{display:inline-flex;align-items:center;justify-content:center}.app-backtop-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.app-backtop-button.el-button:not(.is-text):not(.is-link):hover{transform:translateY(-2px);box-shadow:0 14px 26px #243c964d,inset 0 1px #ffffff38}.app-backtop-button.el-button:not(.is-text):not(.is-link):active{transform:translateY(0);box-shadow:0 6px 14px #243c9638,inset 0 1px 2px #1b2f7847}.cst-pagination[data-v-6bdb609b]{display:flex;width:100%}.cst-pagination--start[data-v-6bdb609b]{justify-content:flex-start}.cst-pagination--center[data-v-6bdb609b]{justify-content:center}.cst-pagination--end[data-v-6bdb609b]{justify-content:flex-end}.cst-table-wrapper[data-v-18cdd107]{display:flex;width:100%;min-height:0;flex-direction:column}.cst-table[data-v-18cdd107]{width:100%;overflow:hidden;border-radius:var(--el-border-radius-base);box-shadow:var(--el-box-shadow-light)}.cst-table-pagination[data-v-18cdd107]{margin-top:var(--cst-table-pagination-gap, 16px)}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
type PaginationAlign = 'start' | 'center' | 'end';
|
|
2
|
+
declare function __VLS_template(): {
|
|
3
|
+
slots: {
|
|
4
|
+
default?(_: {}): any;
|
|
5
|
+
};
|
|
6
|
+
refs: {};
|
|
7
|
+
attrs: Partial<{}>;
|
|
8
|
+
};
|
|
9
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
10
|
+
declare const __VLS_component: import("vue").DefineComponent<{
|
|
11
|
+
currentPage?: number;
|
|
12
|
+
pageSize?: number;
|
|
13
|
+
total?: number;
|
|
14
|
+
pageCount?: number;
|
|
15
|
+
pageSizes?: number[];
|
|
16
|
+
layout?: string;
|
|
17
|
+
background?: boolean;
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
hideOnSinglePage?: boolean;
|
|
20
|
+
align?: PaginationAlign;
|
|
21
|
+
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
22
|
+
"update:currentPage": (value: number) => any;
|
|
23
|
+
"update:pageSize": (value: number) => any;
|
|
24
|
+
currentChange: (value: number) => any;
|
|
25
|
+
sizeChange: (value: number) => any;
|
|
26
|
+
prevClick: (value: number) => any;
|
|
27
|
+
nextClick: (value: number) => any;
|
|
28
|
+
}, string, import("vue").PublicProps, Readonly<{
|
|
29
|
+
currentPage?: number;
|
|
30
|
+
pageSize?: number;
|
|
31
|
+
total?: number;
|
|
32
|
+
pageCount?: number;
|
|
33
|
+
pageSizes?: number[];
|
|
34
|
+
layout?: string;
|
|
35
|
+
background?: boolean;
|
|
36
|
+
disabled?: boolean;
|
|
37
|
+
hideOnSinglePage?: boolean;
|
|
38
|
+
align?: PaginationAlign;
|
|
39
|
+
}> & Readonly<{
|
|
40
|
+
"onUpdate:currentPage"?: ((value: number) => any) | undefined;
|
|
41
|
+
"onUpdate:pageSize"?: ((value: number) => any) | undefined;
|
|
42
|
+
onCurrentChange?: ((value: number) => any) | undefined;
|
|
43
|
+
onSizeChange?: ((value: number) => any) | undefined;
|
|
44
|
+
onPrevClick?: ((value: number) => any) | undefined;
|
|
45
|
+
onNextClick?: ((value: number) => any) | undefined;
|
|
46
|
+
}>, {
|
|
47
|
+
disabled: boolean;
|
|
48
|
+
currentPage: number;
|
|
49
|
+
pageSize: number;
|
|
50
|
+
total: number;
|
|
51
|
+
pageCount: number;
|
|
52
|
+
pageSizes: number[];
|
|
53
|
+
layout: string;
|
|
54
|
+
background: boolean;
|
|
55
|
+
hideOnSinglePage: boolean;
|
|
56
|
+
align: PaginationAlign;
|
|
57
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
58
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
59
|
+
export default _default;
|
|
60
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
61
|
+
new (): {
|
|
62
|
+
$slots: S;
|
|
63
|
+
};
|
|
64
|
+
};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
type PaginationAlign = 'start' | 'center' | 'end';
|
|
2
|
+
declare function __VLS_template(): {
|
|
3
|
+
slots: {
|
|
4
|
+
default?(_: {}): any;
|
|
5
|
+
};
|
|
6
|
+
refs: {};
|
|
7
|
+
attrs: Partial<{}>;
|
|
8
|
+
};
|
|
9
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
10
|
+
declare const __VLS_component: import("vue").DefineComponent<{
|
|
11
|
+
data?: unknown[];
|
|
12
|
+
pagination?: boolean;
|
|
13
|
+
defaultPageSize?: number;
|
|
14
|
+
pageSizes?: number[];
|
|
15
|
+
paginationLayout?: string;
|
|
16
|
+
paginationBackground?: boolean;
|
|
17
|
+
paginationAlign?: PaginationAlign;
|
|
18
|
+
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
19
|
+
currentPageChange: (value: number) => any;
|
|
20
|
+
pageSizeChange: (value: number) => any;
|
|
21
|
+
}, string, import("vue").PublicProps, Readonly<{
|
|
22
|
+
data?: unknown[];
|
|
23
|
+
pagination?: boolean;
|
|
24
|
+
defaultPageSize?: number;
|
|
25
|
+
pageSizes?: number[];
|
|
26
|
+
paginationLayout?: string;
|
|
27
|
+
paginationBackground?: boolean;
|
|
28
|
+
paginationAlign?: PaginationAlign;
|
|
29
|
+
}> & Readonly<{
|
|
30
|
+
onCurrentPageChange?: ((value: number) => any) | undefined;
|
|
31
|
+
onPageSizeChange?: ((value: number) => any) | undefined;
|
|
32
|
+
}>, {
|
|
33
|
+
data: unknown[];
|
|
34
|
+
pageSizes: number[];
|
|
35
|
+
defaultPageSize: number;
|
|
36
|
+
pagination: boolean;
|
|
37
|
+
paginationLayout: string;
|
|
38
|
+
paginationBackground: boolean;
|
|
39
|
+
paginationAlign: PaginationAlign;
|
|
40
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
41
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
42
|
+
export default _default;
|
|
43
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
44
|
+
new (): {
|
|
45
|
+
$slots: S;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),b=e.defineComponent({name:"CstPagination",inheritAttrs:!1,__name:"CstPagination",props:{currentPage:{default:1},pageSize:{default:10},total:{default:void 0},pageCount:{default:void 0},pageSizes:{default:()=>[10,20,50,100]},layout:{default:"sizes, prev, pager, next"},background:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},hideOnSinglePage:{type:Boolean,default:!1},align:{default:"end"}},emits:["update:currentPage","update:pageSize","currentChange","sizeChange","prevClick","nextClick"],setup(t,{emit:l}){const o=l;return(u,n)=>{const s=e.resolveComponent("el-pagination");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["cst-pagination",`cst-pagination--${t.align}`])},[e.createVNode(s,e.mergeProps(u.$attrs,{"current-page":t.currentPage,"page-size":t.pageSize,"page-sizes":t.pageSizes,layout:t.layout,background:t.background,disabled:t.disabled,"hide-on-single-page":t.hideOnSinglePage,total:t.pageCount===void 0?t.total??0:void 0,"page-count":t.pageCount,"onUpdate:currentPage":n[0]||(n[0]=a=>o("update:currentPage",a)),"onUpdate:pageSize":n[1]||(n[1]=a=>o("update:pageSize",a)),onCurrentChange:n[2]||(n[2]=a=>o("currentChange",a)),onSizeChange:n[3]||(n[3]=a=>o("sizeChange",a)),onPrevClick:n[4]||(n[4]=a=>o("prevClick",a)),onNextClick:n[5]||(n[5]=a=>o("nextClick",a))}),{default:e.withCtx(()=>[e.renderSlot(u.$slots,"default",{},void 0,!0)]),_:3},16,["current-page","page-size","page-sizes","layout","background","disabled","hide-on-single-page","total","page-count"])],2)}}}),c=(t,l)=>{const o=t.__vccOpts||t;for(const[u,n]of l)o[u]=n;return o},g=c(b,[["__scopeId","data-v-6bdb609b"]]),P={class:"cst-table-wrapper"},S={key:0,class:"cst-table-pagination"},k=e.defineComponent({name:"CstTable",inheritAttrs:!1,__name:"CstTable",props:{data:{default:()=>[]},pagination:{type:Boolean,default:!0},defaultPageSize:{default:20},pageSizes:{default:()=>[10,20,50,100]},paginationLayout:{default:"total, sizes, prev, pager, next, jumper"},paginationBackground:{type:Boolean,default:!0},paginationAlign:{default:"end"}},emits:["currentPageChange","pageSizeChange"],setup(t,{emit:l}){const o=t,u=l,n=e.useAttrs(),s=e.ref(1),a=e.ref(o.defaultPageSize),C=e.computed(()=>{if(!o.pagination)return o.data;const i=(s.value-1)*a.value;return o.data.slice(i,i+a.value)}),m=e.computed(()=>({border:!0,stripe:!0,fit:!0,tableLayout:"auto",...n})),d=i=>{s.value=i,u("currentPageChange",i)},v=i=>{a.value=i,s.value=1,u("pageSizeChange",i),u("currentPageChange",1)};return e.watch(()=>o.data.length,i=>{const r=Math.max(1,Math.ceil(i/a.value));s.value>r&&d(r)}),(i,r)=>{const z=e.resolveComponent("el-table");return e.openBlock(),e.createElementBlock("div",P,[e.createVNode(z,e.mergeProps(m.value,{data:C.value,class:"cst-table"}),{default:e.withCtx(()=>[e.renderSlot(i.$slots,"default",{},void 0,!0)]),_:3},16,["data"]),t.pagination?(e.openBlock(),e.createElementBlock("div",S,[e.createVNode(g,{"current-page":s.value,"page-size":a.value,total:t.data.length,"page-sizes":t.pageSizes,layout:t.paginationLayout,background:t.paginationBackground,align:t.paginationAlign,"onUpdate:currentPage":d,"onUpdate:pageSize":v},null,8,["current-page","page-size","total","page-sizes","layout","background","align"])])):e.createCommentVNode("",!0)])}}}),p=c(k,[["__scopeId","data-v-18cdd107"]]),y=[p,g],f=t=>{y.forEach(l=>{t.component(l.name||"AnonymousComponent",l)})},h={install:f};exports.CstPagination=g;exports.CstTable=p;exports.default=h;exports.install=f;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { App, Plugin } from 'vue';
|
|
2
|
+
import CstPagination from './CstPagination.vue';
|
|
3
|
+
import CstTable from './CstTable.vue';
|
|
4
|
+
declare const install: (app: App) => void;
|
|
5
|
+
declare const CstTableComponents: Plugin;
|
|
6
|
+
export { CstPagination, CstTable, install, };
|
|
7
|
+
export default CstTableComponents;
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
import { defineComponent as C, resolveComponent as m, openBlock as s, createElementBlock as r, normalizeClass as x, createVNode as d, mergeProps as z, withCtx as v, renderSlot as b, useAttrs as A, ref as p, computed as f, watch as $, createCommentVNode as T } from "vue";
|
|
2
|
+
const U = /* @__PURE__ */ C({
|
|
3
|
+
name: "CstPagination",
|
|
4
|
+
inheritAttrs: !1,
|
|
5
|
+
__name: "CstPagination",
|
|
6
|
+
props: {
|
|
7
|
+
currentPage: { default: 1 },
|
|
8
|
+
pageSize: { default: 10 },
|
|
9
|
+
total: { default: void 0 },
|
|
10
|
+
pageCount: { default: void 0 },
|
|
11
|
+
pageSizes: { default: () => [10, 20, 50, 100] },
|
|
12
|
+
layout: { default: "sizes, prev, pager, next" },
|
|
13
|
+
background: { type: Boolean, default: !0 },
|
|
14
|
+
disabled: { type: Boolean, default: !1 },
|
|
15
|
+
hideOnSinglePage: { type: Boolean, default: !1 },
|
|
16
|
+
align: { default: "end" }
|
|
17
|
+
},
|
|
18
|
+
emits: ["update:currentPage", "update:pageSize", "currentChange", "sizeChange", "prevClick", "nextClick"],
|
|
19
|
+
setup(e, { emit: i }) {
|
|
20
|
+
const n = i;
|
|
21
|
+
return (l, a) => {
|
|
22
|
+
const u = m("el-pagination");
|
|
23
|
+
return s(), r("div", {
|
|
24
|
+
class: x(["cst-pagination", `cst-pagination--${e.align}`])
|
|
25
|
+
}, [
|
|
26
|
+
d(u, z(l.$attrs, {
|
|
27
|
+
"current-page": e.currentPage,
|
|
28
|
+
"page-size": e.pageSize,
|
|
29
|
+
"page-sizes": e.pageSizes,
|
|
30
|
+
layout: e.layout,
|
|
31
|
+
background: e.background,
|
|
32
|
+
disabled: e.disabled,
|
|
33
|
+
"hide-on-single-page": e.hideOnSinglePage,
|
|
34
|
+
total: e.pageCount === void 0 ? e.total ?? 0 : void 0,
|
|
35
|
+
"page-count": e.pageCount,
|
|
36
|
+
"onUpdate:currentPage": a[0] || (a[0] = (t) => n("update:currentPage", t)),
|
|
37
|
+
"onUpdate:pageSize": a[1] || (a[1] = (t) => n("update:pageSize", t)),
|
|
38
|
+
onCurrentChange: a[2] || (a[2] = (t) => n("currentChange", t)),
|
|
39
|
+
onSizeChange: a[3] || (a[3] = (t) => n("sizeChange", t)),
|
|
40
|
+
onPrevClick: a[4] || (a[4] = (t) => n("prevClick", t)),
|
|
41
|
+
onNextClick: a[5] || (a[5] = (t) => n("nextClick", t))
|
|
42
|
+
}), {
|
|
43
|
+
default: v(() => [
|
|
44
|
+
b(l.$slots, "default", {}, void 0, !0)
|
|
45
|
+
]),
|
|
46
|
+
_: 3
|
|
47
|
+
}, 16, ["current-page", "page-size", "page-sizes", "layout", "background", "disabled", "hide-on-single-page", "total", "page-count"])
|
|
48
|
+
], 2);
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
}), P = (e, i) => {
|
|
52
|
+
const n = e.__vccOpts || e;
|
|
53
|
+
for (const [l, a] of i)
|
|
54
|
+
n[l] = a;
|
|
55
|
+
return n;
|
|
56
|
+
}, S = /* @__PURE__ */ P(U, [["__scopeId", "data-v-6bdb609b"]]), w = { class: "cst-table-wrapper" }, L = {
|
|
57
|
+
key: 0,
|
|
58
|
+
class: "cst-table-pagination"
|
|
59
|
+
}, N = /* @__PURE__ */ C({
|
|
60
|
+
name: "CstTable",
|
|
61
|
+
inheritAttrs: !1,
|
|
62
|
+
__name: "CstTable",
|
|
63
|
+
props: {
|
|
64
|
+
data: { default: () => [] },
|
|
65
|
+
pagination: { type: Boolean, default: !0 },
|
|
66
|
+
defaultPageSize: { default: 20 },
|
|
67
|
+
pageSizes: { default: () => [10, 20, 50, 100] },
|
|
68
|
+
paginationLayout: { default: "total, sizes, prev, pager, next, jumper" },
|
|
69
|
+
paginationBackground: { type: Boolean, default: !0 },
|
|
70
|
+
paginationAlign: { default: "end" }
|
|
71
|
+
},
|
|
72
|
+
emits: ["currentPageChange", "pageSizeChange"],
|
|
73
|
+
setup(e, { emit: i }) {
|
|
74
|
+
const n = e, l = i, a = A(), u = p(1), t = p(n.defaultPageSize), k = f(() => {
|
|
75
|
+
if (!n.pagination)
|
|
76
|
+
return n.data;
|
|
77
|
+
const o = (u.value - 1) * t.value;
|
|
78
|
+
return n.data.slice(o, o + t.value);
|
|
79
|
+
}), y = f(() => ({
|
|
80
|
+
border: !0,
|
|
81
|
+
stripe: !0,
|
|
82
|
+
fit: !0,
|
|
83
|
+
tableLayout: "auto",
|
|
84
|
+
...a
|
|
85
|
+
})), c = (o) => {
|
|
86
|
+
u.value = o, l("currentPageChange", o);
|
|
87
|
+
}, h = (o) => {
|
|
88
|
+
t.value = o, u.value = 1, l("pageSizeChange", o), l("currentPageChange", 1);
|
|
89
|
+
};
|
|
90
|
+
return $(
|
|
91
|
+
() => n.data.length,
|
|
92
|
+
(o) => {
|
|
93
|
+
const g = Math.max(1, Math.ceil(o / t.value));
|
|
94
|
+
u.value > g && c(g);
|
|
95
|
+
}
|
|
96
|
+
), (o, g) => {
|
|
97
|
+
const B = m("el-table");
|
|
98
|
+
return s(), r("div", w, [
|
|
99
|
+
d(B, z(y.value, {
|
|
100
|
+
data: k.value,
|
|
101
|
+
class: "cst-table"
|
|
102
|
+
}), {
|
|
103
|
+
default: v(() => [
|
|
104
|
+
b(o.$slots, "default", {}, void 0, !0)
|
|
105
|
+
]),
|
|
106
|
+
_: 3
|
|
107
|
+
}, 16, ["data"]),
|
|
108
|
+
e.pagination ? (s(), r("div", L, [
|
|
109
|
+
d(S, {
|
|
110
|
+
"current-page": u.value,
|
|
111
|
+
"page-size": t.value,
|
|
112
|
+
total: e.data.length,
|
|
113
|
+
"page-sizes": e.pageSizes,
|
|
114
|
+
layout: e.paginationLayout,
|
|
115
|
+
background: e.paginationBackground,
|
|
116
|
+
align: e.paginationAlign,
|
|
117
|
+
"onUpdate:currentPage": c,
|
|
118
|
+
"onUpdate:pageSize": h
|
|
119
|
+
}, null, 8, ["current-page", "page-size", "total", "page-sizes", "layout", "background", "align"])
|
|
120
|
+
])) : T("", !0)
|
|
121
|
+
]);
|
|
122
|
+
};
|
|
123
|
+
}
|
|
124
|
+
}), O = /* @__PURE__ */ P(N, [["__scopeId", "data-v-18cdd107"]]), E = [O, S], I = (e) => {
|
|
125
|
+
E.forEach((i) => {
|
|
126
|
+
e.component(i.name || "AnonymousComponent", i);
|
|
127
|
+
});
|
|
128
|
+
}, V = {
|
|
129
|
+
install: I
|
|
130
|
+
};
|
|
131
|
+
export {
|
|
132
|
+
S as CstPagination,
|
|
133
|
+
O as CstTable,
|
|
134
|
+
V as default,
|
|
135
|
+
I as install
|
|
136
|
+
};
|
package/package.json
CHANGED
|
@@ -1,66 +1,74 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@cst-ui/nano-buttons",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Nano themed Vue 3 button
|
|
5
|
-
"license": "UNLICENSED",
|
|
6
|
-
"type": "module",
|
|
7
|
-
"main": "./dist/index.cjs",
|
|
8
|
-
"module": "./dist/index.mjs",
|
|
9
|
-
"types": "./dist/index.d.ts",
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
"*": {
|
|
12
|
-
"dialog-tabs": [
|
|
13
|
-
"dist/dialog-tabs/index.d.ts"
|
|
14
|
-
],
|
|
15
|
-
"buttons": [
|
|
16
|
-
"dist/buttons/index.d.ts"
|
|
17
|
-
]
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
"
|
|
26
|
-
],
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
"
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
"
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
"
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
"
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"vue-router": "^4.4.5"
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "@cst-ui/nano-buttons",
|
|
3
|
+
"version": "0.3.0",
|
|
4
|
+
"description": "Nano themed Vue 3 button, table, pagination, and dialog tab components based on Element Plus.",
|
|
5
|
+
"license": "UNLICENSED",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"main": "./dist/index.cjs",
|
|
8
|
+
"module": "./dist/index.mjs",
|
|
9
|
+
"types": "./dist/index.d.ts",
|
|
10
|
+
"typesVersions": {
|
|
11
|
+
"*": {
|
|
12
|
+
"dialog-tabs": [
|
|
13
|
+
"dist/dialog-tabs/index.d.ts"
|
|
14
|
+
],
|
|
15
|
+
"buttons": [
|
|
16
|
+
"dist/buttons/index.d.ts"
|
|
17
|
+
],
|
|
18
|
+
"table": [
|
|
19
|
+
"dist/table/index.d.ts"
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
"files": [
|
|
24
|
+
"dist",
|
|
25
|
+
"README.md"
|
|
26
|
+
],
|
|
27
|
+
"sideEffects": [
|
|
28
|
+
"*.css"
|
|
29
|
+
],
|
|
30
|
+
"exports": {
|
|
31
|
+
".": {
|
|
32
|
+
"types": "./dist/index.d.ts",
|
|
33
|
+
"import": "./dist/index.mjs",
|
|
34
|
+
"require": "./dist/index.cjs"
|
|
35
|
+
},
|
|
36
|
+
"./buttons": {
|
|
37
|
+
"types": "./dist/buttons/index.d.ts",
|
|
38
|
+
"import": "./dist/buttons/index.mjs",
|
|
39
|
+
"require": "./dist/buttons/index.cjs"
|
|
40
|
+
},
|
|
41
|
+
"./dialog-tabs": {
|
|
42
|
+
"types": "./dist/dialog-tabs/index.d.ts",
|
|
43
|
+
"import": "./dist/dialog-tabs/index.mjs",
|
|
44
|
+
"require": "./dist/dialog-tabs/index.cjs"
|
|
45
|
+
},
|
|
46
|
+
"./table": {
|
|
47
|
+
"types": "./dist/table/index.d.ts",
|
|
48
|
+
"import": "./dist/table/index.mjs",
|
|
49
|
+
"require": "./dist/table/index.cjs"
|
|
50
|
+
},
|
|
51
|
+
"./style.css": "./dist/style.css"
|
|
52
|
+
},
|
|
53
|
+
"scripts": {
|
|
54
|
+
"build": "vite build && vue-tsc -p tsconfig.build.json --declaration --emitDeclarationOnly",
|
|
55
|
+
"docs:dev": "vite --config docs/vite.config.ts --host 0.0.0.0",
|
|
56
|
+
"docs:build": "vite build --config docs/vite.config.ts",
|
|
57
|
+
"docs:preview": "vite preview --config docs/vite.config.ts --host 0.0.0.0",
|
|
58
|
+
"typecheck": "vue-tsc -p tsconfig.build.json --noEmit"
|
|
59
|
+
},
|
|
60
|
+
"peerDependencies": {
|
|
61
|
+
"element-plus": "^2.8.5",
|
|
62
|
+
"vue": "^3.5.13",
|
|
63
|
+
"vue-router": "^4.4.5"
|
|
64
|
+
},
|
|
65
|
+
"devDependencies": {
|
|
66
|
+
"@element-plus/icons-vue": "2.3.2",
|
|
67
|
+
"@types/node": "^18.11.3",
|
|
68
|
+
"@vitejs/plugin-vue": "^5.1.4",
|
|
69
|
+
"typescript": "^5.6.3",
|
|
70
|
+
"vite": "^5.4.9",
|
|
71
|
+
"vue-router": "^4.4.5",
|
|
72
|
+
"vue-tsc": "2.1.6"
|
|
73
|
+
}
|
|
74
|
+
}
|