Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

better Fields component + size handling

Browse source
This commit is contained in:
Jordan Blasenhauer 2024-08-14 13:54:48 +02:00
parent ac1b79d558
commit 08d504579f
17 changed files with 355 additions and 162 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/ui/client/builder/pages/bans.py
View file

@ -115,6 +115,8 @@ def bans_filters(reasons: Optional[list] = None, remains: Optional[list] = None)
"value": "",
"inpType": "input",
"columns": {"pc": 3, "tablet": 4, "mobile": 12},
"fieldSize": "sm",
"isClipboard": True,
"popovers": [
{
"iconName": "info",
@ -140,6 +142,7 @@ def bans_filters(reasons: Optional[list] = None, remains: Optional[list] = None)
"inpType": "select",
"onlyDown": True,
"columns": {"pc": 3, "tablet": 4, "mobile": 12},
"fieldSize": "sm",
"popovers": [
{
"iconName": "info",
@ -164,6 +167,7 @@ def bans_filters(reasons: Optional[list] = None, remains: Optional[list] = None)
"inpType": "select",
"onlyDown": True,
"columns": {"pc": 3, "tablet": 4, "mobile": 12},
"fieldSize": "sm",
"popovers": [
{
"iconName": "info",
@ -232,6 +236,7 @@ def bans_list(bans: Optional[list] = None, reasons: Optional[list] = None, remai
actionsButtons=actions_table_list,
columns=bans_columns,
items=bans_items(bans),
itemsBeforePagination=20,
filters=bans_filters(reasons=reasons, remains=remains),
layout="fitColumns",
),
@ -368,7 +373,12 @@ def bans_add() -> dict:
title_widget("bans_add_title"), # keep it (a18n)
subtitle_widget("bans_add_subtitle"), # keep it (a18n)
tabulator_widget(
id="table-register-plugins", columns=bans_add_columns, items=default_add_ban, layout="fitColumns", actionsButtons=bans_add_table_actions
id="table-register-plugins",
columns=bans_add_columns,
items=default_add_ban,
layout="fitColumns",
actionsButtons=bans_add_table_actions,
itemsBeforePagination=20,
),
add_ban_action,
],

58
src/ui/client/builder/pages/utils/widgets.py
View file

@ -245,6 +245,7 @@ def checkbox_widget(
containerClass: str = "",
headerClass: str = "",
inpClass: str = "",
fieldSize: str = "normal",
tabId: Union[str, int] = ""
):
"""
@ -268,6 +269,7 @@ def checkbox_widget(
- `containerClass` **String** (optional, default `""`)
- `headerClass` **String** (optional, default `""`)
- `inpClass` **String** (optional, default `""`)
- `fieldSize` **String** Size between "normal" or "sm" (optional, default `"normal"`)
- `tabId` **(String | Number)** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`)
EXAMPLE
@ -300,7 +302,7 @@ def checkbox_widget(
# List of params that will be add only if not default value
list_params = [("id", id, ""),("attrs", attrs, None),("popovers", popovers, None),("inpType", inpType, "checkbox"),("disabled", disabled, False),("required", required, False),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("containerClass", containerClass, ""),("headerClass", headerClass, ""),("inpClass", inpClass, ""),("tabId", tabId, "")]
list_params = [("id", id, ""),("attrs", attrs, None),("popovers", popovers, None),("inpType", inpType, "checkbox"),("disabled", disabled, False),("required", required, False),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("containerClass", containerClass, ""),("headerClass", headerClass, ""),("inpClass", inpClass, ""),("fieldSize", fieldSize, "normal"),("tabId", tabId, "")]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -369,6 +371,7 @@ def combobox_widget(
overflowAttrEl: bool = "",
containerClass: str = "",
inpClass: str = "",
fieldSize: str = "normal",
headerClass: str = "",
tabId: Union[str, int] = ""
):
@ -397,6 +400,7 @@ def combobox_widget(
- `overflowAttrEl` **Boolean** Attribute to select the container the element has to check for overflow (optional, default `""`)
- `containerClass` **String** (optional, default `""`)
- `inpClass` **String** (optional, default `""`)
- `fieldSize` **String** Size between "normal" or "sm" (optional, default `"normal"`)
- `headerClass` **String** (optional, default `""`)
- `tabId` **(String | Number)** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`)
@ -431,7 +435,7 @@ def combobox_widget(
# List of params that will be add only if not default value
list_params = [("id", id, ""),("attrs", attrs, None),("maxBtnChars", maxBtnChars, ""),("popovers", popovers, None),("inpType", inpType, "select"),("disabled", disabled, False),("required", required, False),("requiredValues", requiredValues, None),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("onlyDown", onlyDown, False),("overflowAttrEl", overflowAttrEl, ""),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("headerClass", headerClass, ""),("tabId", tabId, "")]
list_params = [("id", id, ""),("attrs", attrs, None),("maxBtnChars", maxBtnChars, ""),("popovers", popovers, None),("inpType", inpType, "select"),("disabled", disabled, False),("required", required, False),("requiredValues", requiredValues, None),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("onlyDown", onlyDown, False),("overflowAttrEl", overflowAttrEl, ""),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("fieldSize", fieldSize, "normal"),("headerClass", headerClass, ""),("tabId", tabId, "")]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -495,6 +499,7 @@ def datepicker_widget(
required: bool = False,
headerClass: str = "",
containerClass: str = "",
fieldSize: str = "normal",
tabId: Union[str, int] = ""
):
"""
@ -521,6 +526,7 @@ def datepicker_widget(
- `required` **Boolean** (optional, default `false`)
- `headerClass` **String** (optional, default `""`)
- `containerClass` **String** (optional, default `""`)
- `fieldSize` **String** Size between "normal" or "sm" (optional, default `"normal"`)
- `tabId` **(String | Number)** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`)
EXAMPLE
@ -552,7 +558,7 @@ def datepicker_widget(
# List of params that will be add only if not default value
list_params = [("id", id, ""),("popovers", popovers, None),("attrs", attrs, None),("inpType", inpType, "datepicker"),("value", value, ""),("minDate", minDate, ""),("maxDate", maxDate, ""),("isClipboard", isClipboard, True),("hideLabel", hideLabel, False),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("disabled", disabled, False),("required", required, False),("headerClass", headerClass, ""),("containerClass", containerClass, ""),("tabId", tabId, "")]
list_params = [("id", id, ""),("popovers", popovers, None),("attrs", attrs, None),("inpType", inpType, "datepicker"),("value", value, ""),("minDate", minDate, ""),("maxDate", maxDate, ""),("isClipboard", isClipboard, True),("hideLabel", hideLabel, False),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("disabled", disabled, False),("required", required, False),("headerClass", headerClass, ""),("containerClass", containerClass, ""),("fieldSize", fieldSize, "normal"),("tabId", tabId, "")]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -1061,6 +1067,7 @@ def input_widget(
containerClass: str = "",
inpClass: str = "",
headerClass: str = "",
fieldSize: str = "normal",
tabId: Union[str, int] = ""
):
"""
@ -1091,6 +1098,7 @@ def input_widget(
- `containerClass` **String** (optional, default `""`)
- `inpClass` **String** (optional, default `""`)
- `headerClass` **String** (optional, default `""`)
- `fieldSize` **String** Size between "normal" or "sm" (optional, default `"normal"`)
- `tabId` **(String | Number)** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`)
EXAMPLE
@ -1123,7 +1131,7 @@ def input_widget(
# List of params that will be add only if not default value
list_params = [("id", id, ""),("type", type, "text"),("attrs", attrs, None),("popovers", popovers, None),("inpType", inpType, "input"),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("disabled", disabled, False),("required", required, False),("placeholder", placeholder, ""),("pattern", pattern, "(?.*)"),("isClipboard", isClipboard, True),("readonly", readonly, False),("hideLabel", hideLabel, False),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("headerClass", headerClass, ""),("tabId", tabId, "")]
list_params = [("id", id, ""),("type", type, "text"),("attrs", attrs, None),("popovers", popovers, None),("inpType", inpType, "input"),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("disabled", disabled, False),("required", required, False),("placeholder", placeholder, ""),("pattern", pattern, "(?.*)"),("isClipboard", isClipboard, True),("readonly", readonly, False),("hideLabel", hideLabel, False),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("headerClass", headerClass, ""),("fieldSize", fieldSize, "normal"),("tabId", tabId, "")]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -1149,6 +1157,7 @@ def list_widget(
containerClass: str = "",
inpClass: str = "",
headerClass: str = "",
fieldSize: str = "normal",
tabId: Union[str, int] = ""
):
"""
@ -1175,6 +1184,7 @@ def list_widget(
- `containerClass` **String** (optional, default `""`)
- `inpClass` **String** (optional, default `""`)
- `headerClass` **String** (optional, default `""`)
- `fieldSize` **String** Size between "normal" or "sm" (optional, default `"normal"`)
- `tabId` **(String | Number)** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`)
EXAMPLE
@ -1203,7 +1213,7 @@ def list_widget(
# List of params that will be add only if not default value
list_params = [("id", id, ""),("attrs", attrs, None),("separator", separator, " "),("maxBtnChars", maxBtnChars, ""),("popovers", popovers, None),("inpType", inpType, "list"),("disabled", disabled, False),("required", required, False),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("onlyDown", onlyDown, False),("overflowAttrEl", overflowAttrEl, ""),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("headerClass", headerClass, ""),("tabId", tabId, "")]
list_params = [("id", id, ""),("attrs", attrs, None),("separator", separator, " "),("maxBtnChars", maxBtnChars, ""),("popovers", popovers, None),("inpType", inpType, "list"),("disabled", disabled, False),("required", required, False),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("onlyDown", onlyDown, False),("overflowAttrEl", overflowAttrEl, ""),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("headerClass", headerClass, ""),("fieldSize", fieldSize, "normal"),("tabId", tabId, "")]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -1652,6 +1662,7 @@ def select_widget(
containerClass: str = "",
inpClass: str = "",
headerClass: str = "",
fieldSize: str = "normal",
tabId: Union[str, int] = ""
):
"""
@ -1681,6 +1692,7 @@ def select_widget(
- `containerClass` **String** (optional, default `""`)
- `inpClass` **String** (optional, default `""`)
- `headerClass` **String** (optional, default `""`)
- `fieldSize` **String** Size between "normal" or "sm" (optional, default `"normal"`)
- `tabId` **(String | Number)** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`)
EXAMPLE
@ -1714,7 +1726,7 @@ def select_widget(
# List of params that will be add only if not default value
list_params = [("id", id, ""),("attrs", attrs, None),("popovers", popovers, None),("inpType", inpType, "select"),("maxBtnChars", maxBtnChars, ""),("disabled", disabled, False),("required", required, False),("requiredValues", requiredValues, None),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("onlyDown", onlyDown, False),("overflowAttrEl", overflowAttrEl, ""),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("headerClass", headerClass, ""),("tabId", tabId, "")]
list_params = [("id", id, ""),("attrs", attrs, None),("popovers", popovers, None),("inpType", inpType, "select"),("maxBtnChars", maxBtnChars, ""),("disabled", disabled, False),("required", required, False),("requiredValues", requiredValues, None),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("onlyDown", onlyDown, False),("overflowAttrEl", overflowAttrEl, ""),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("headerClass", headerClass, ""),("fieldSize", fieldSize, "normal"),("tabId", tabId, "")]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -1960,6 +1972,7 @@ def tabulator_widget(
colMinWidth: int = 150,
colMaxWidth: int = 0,
isPagination: bool = True,
itemsBeforePagination: int = 10,
paginationSize: int = 10,
paginationInitialPage: int = 1,
paginationSizeSelector: list = [10,25,50,100]
@ -1976,20 +1989,21 @@ def tabulator_widget(
PARAMETERS
- `id` **string** Unique id of the table
- `isStriped` **boolean** Add striped class to the table (optional, default `true`)
- `filters` **array** List of filters to display (optional, default `[]`)
- `columns` **array** List of columns to display
- `items` **array** List of items to display
- `actionsButtons` **array** Buttons group props to render buttons that will be after filters and before the table stick left. (optional, default `[]`)
- `layout` **string** Layout of the table. "fitDataTable" useful with wide columns, "fitColumns" useful with narrow columns. (optional, default `"fitDataTable"`)
- `rowHeight` **number** Case value is 0, this will be ignored. (optional, default `0`)
- `colMinWidth` **number** Minimum width for each col of a row (optional, default `150`)
- `colMaxWidth` **number** Maximum width for each col of a row. Case value is 0, this will be ignored. (optional, default `0`)
- `isPagination` **boolean** Add pagination to the table (optional, default `true`)
- `paginationSize` **number** Number of items per page (optional, default `10`)
- `paginationInitialPage` **number** Initial page (optional, default `1`)
- `paginationSizeSelector` **array** Select number of items per page (optional, default `[10,25,50,100]`)
- `id` **String** Unique id of the table
- `isStriped` **Boolean** Add striped class to the table (optional, default `true`)
- `filters` **Array** List of filters to display (optional, default `[]`)
- `columns` **Array** List of columns to display
- `items` **Array** List of items to display
- `actionsButtons` **Array** Buttons group props to render buttons that will be after filters and before the table stick left. (optional, default `[]`)
- `layout` **String** Layout of the table. "fitDataTable" useful with wide columns, "fitColumns" useful with narrow columns. (optional, default `"fitDataTable"`)
- `rowHeight` **Number** Case value is 0, this will be ignored. (optional, default `0`)
- `colMinWidth` **Number** Minimum width for each col of a row (optional, default `150`)
- `colMaxWidth` **Number** Maximum width for each col of a row. Case value is 0, this will be ignored. (optional, default `0`)
- `isPagination` **Boolean** Add pagination to the table (optional, default `true`)
- `itemsBeforePagination` **Number** Hide pagination unless number is reach. (optional, default `10`)
- `paginationSize` **Number** Number of items per page (optional, default `10`)
- `paginationInitialPage` **Number** Initial page (optional, default `1`)
- `paginationSizeSelector` **Array** Select number of items per page (optional, default `[10,25,50,100]`)
EXAMPLE
@ -2007,7 +2021,7 @@ def tabulator_widget(
},
}];
Returns **void**;
Returns **Void**;
"""
@ -2019,7 +2033,7 @@ def tabulator_widget(
# List of params that will be add only if not default value
list_params = [("isStriped", isStriped, True),("filters", filters, None),("actionsButtons", actionsButtons, None),("layout", layout, "fitDataTable"),("rowHeight", rowHeight, 0),("colMinWidth", colMinWidth, 150),("colMaxWidth", colMaxWidth, 0),("isPagination", isPagination, True),("paginationSize", paginationSize, 10),("paginationInitialPage", paginationInitialPage, 1),("paginationSizeSelector", paginationSizeSelector, [10,25,50,100])]
list_params = [("isStriped", isStriped, True),("filters", filters, None),("actionsButtons", actionsButtons, None),("layout", layout, "fitDataTable"),("rowHeight", rowHeight, 0),("colMinWidth", colMinWidth, 150),("colMaxWidth", colMaxWidth, 0),("isPagination", isPagination, True),("itemsBeforePagination", itemsBeforePagination, 10),("paginationSize", paginationSize, 10),("paginationInitialPage", paginationInitialPage, 1),("paginationSizeSelector", paginationSizeSelector, [10,25,50,100])]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])

165
src/ui/client/dashboard/components/Form/Fields.vue
View file

@ -39,6 +39,76 @@ const props = defineProps({
},
});
/**
* @name getDataByField
* @description Retrieve share data and specific data for each fields in order to v-bind.
* @param {Object} setting - Setting props
* @param {String} fallbackInpType - The fallback to add fallback in some cases.
* @returns {Object} - props object
*/
function getDataByField(setting, fallbackInpType) {
// Start by the base = setting share by all fields
const base = {
inpType: setting.inpType || fallbackInpType,
id: setting.id || "",
columns: setting.columns || { pc: "12", tablet: "12", mobile: "12" },
value: setting.value || "",
popovers: setting.popovers || [],
disabled: setting.disabled || false,
required: setting.required || false,
label: setting.label || null,
name: setting.name || null,
hideLabel: setting.hideLabel || false,
containerClass: setting.containerClass || "",
headerClass: setting.headerClass || "",
inpClass: setting.inpClass || "",
tabId: setting.tabId || contentIndex,
attrs: setting.attrs || {},
fieldSize: setting.fieldSize || "normal",
};
if (
setting.inpType === "select" ||
(!setting?.inpType && fallbackInpType === "select")
) {
base["values"] = setting.values || [];
base["maxBtnChars"] = setting.maxBtnChars || 0;
base["requiredValues"] = setting.requiredValues || [];
base["onlyDown"] = setting.onlyDown || false;
base["overflowAttrEl"] = setting.overflowAttrEl || "";
}
if (
setting.inpType === "datepicker" ||
(!setting?.inpType && fallbackInpType === "datepicker")
) {
base["minDate"] = setting.minDate || "";
base["maxDate"] = setting.maxDate || "";
base["isClipboard"] = setting.isClipboard || false;
}
if (
setting.inpType === "input" ||
(!setting?.inpType && fallbackInpType === "input")
) {
base["type"] = setting.type || "text";
base["placeholder"] = setting.placeholder || "";
base["pattern"] = setting.pattern || "";
base["isClipboard"] = setting.isClipboard || false;
base["readonly"] = setting.readonly;
}
if (
setting.inpType === "editor" ||
(!setting?.inpType && fallbackInpType === "editor")
) {
base["pattern"] = setting.pattern || "";
base["isClipboard"] = setting.isClipboard || false;
}
return base;
}
// emits
const emit = defineEmits(["inp"]);
</script>
@ -47,111 +117,26 @@ const emit = defineEmits(["inp"]);
<Checkbox
@inp="(value) => $emit('inp', value)"
v-if="props.setting.inpType === 'checkbox'"
:id="props.setting.id || ''"
:columns="props.setting.columns || { pc: '12', tablet: '12', mobile: '12' }"
:value="props.setting.value"
:popovers="props.setting.popovers || []"
:inpType="props.setting.inpType || 'checkbox'"
:disabled="props.setting.disabled || false"
:required="props.setting.required || false"
:label="props.setting.label"
:name="props.setting.name"
:hideLabel="props.setting.hideLabel || false"
:containerClass="props.setting.containerClass || ''"
:headerClass="props.setting.headerClass || ''"
:inpClass="props.setting.inpClass || ''"
:tabId="props.setting.tabId || contentIndex"
:attrs="props.setting.attrs || {}"
v-bind="{ ...getDataByField(props.setting, 'checkbox') }"
/>
<Select
@inp="(value) => $emit('inp', value)"
v-if="props.setting.inpType === 'select'"
:id="props.setting.id || ''"
:columns="props.setting.columns || { pc: '12', tablet: '12', mobile: '12' }"
:value="props.setting.value"
:values="props.setting.values"
:inpType="props.setting.inpType || 'select'"
:maxBtnChars="props.setting.maxBtnChars || 0"
:disabled="props.setting.disabled || false"
:required="props.setting.required || false"
:requiredValues="props.setting.requiredValues || []"
:label="props.setting.label"
:name="props.setting.name"
:popovers="props.setting.popovers || []"
:onlyDown="props.setting.onlyDown || false"
:overflowAttrEl="props.setting.overflowAttrEl || ''"
:hideLabel="props.setting.hideLabel || false"
:containerClass="props.setting.containerClass || ''"
:headerClass="props.setting.headerClass || ''"
:inpClass="props.setting.inpClass || ''"
:tabId="props.setting.tabId || contentIndex"
:attrs="props.setting.attrs || {}"
v-bind="{ ...getDataByField(props.setting, 'select') }"
/>
<Datepicker
@inp="(value) => $emit('inp', value)"
v-if="props.setting.inpType === 'datepicker'"
:id="props.setting.id || ''"
:columns="props.setting.columns || { pc: '12', tablet: '12', mobile: '12' }"
:value="props.setting.value || ''"
:minDate="props.setting.minDate || ''"
:maxDate="props.setting.maxDate || ''"
:inpType="props.setting.inpType || 'datepicker'"
:name="props.setting.name"
:label="props.setting.label"
:popovers="props.setting.popovers || []"
:isClipboard="props.setting.isClipboard || true"
:hideLabel="props.setting.hideLabel || false"
:containerClass="props.setting.containerClass || ''"
:headerClass="props.setting.headerClass || ''"
:inpClass="props.setting.inpClass || ''"
:disabled="props.setting.disabled || false"
:required="props.setting.required || false"
:tabId="props.setting.tabId || contentIndex"
:attrs="props.setting.attrs || {}"
v-bind="{ ...getDataByField(props.setting, 'datepicker') }"
/>
<Input
@inp="(value) => $emit('inp', value)"
v-if="props.setting.inpType === 'input'"
:id="props.setting.id || ''"
:columns="props.setting.columns || { pc: '12', tablet: '12', mobile: '12' }"
:name="props.setting.name"
:type="props.setting.type"
:inpType="props.setting.inpType || 'input'"
:required="props.setting.required || false"
:disabled="props.setting.disabled || false"
:value="props.setting.value"
:placeholder="props.setting.placeholder || ''"
:pattern="props.setting.pattern || ''"
:isClipboard="props.setting.isClipboard || true"
:readonly="props.setting.readonly || false"
:label="props.setting.label"
:popovers="props.setting.popovers || []"
:hideLabel="props.setting.hideLabel || false"
:containerClass="props.setting.containerClass || ''"
:headerClass="props.setting.headerClass || ''"
:inpClass="props.setting.inpClass || ''"
:tabId="props.setting.tabId || contentIndex"
:attrs="props.setting.attrs || {}"
v-bind="{ ...getDataByField(props.setting, 'input') }"
/>
<Editor
@inp="(value) => $emit('inp', value)"
v-if="props.setting.inpType === 'editor'"
:id="props.setting.id || ''"
:columns="props.setting.columns || { pc: '12', tablet: '12', mobile: '12' }"
:name="props.setting.name"
:inpType="props.setting.inpType || 'editor'"
:required="props.setting.required || false"
:disabled="props.setting.disabled || false"
:value="props.setting.value"
:pattern="props.setting.pattern || ''"
:isClipboard="props.setting.isClipboard || true"
:label="props.setting.label"
:popovers="props.setting.popovers || []"
:hideLabel="props.setting.hideLabel || false"
:containerClass="props.setting.containerClass || ''"
:headerClass="props.setting.headerClass || ''"
:editorClass="props.setting.editorClass || ''"
:tabId="props.setting.tabId || contentIndex"
:attrs="props.setting.attrs || {}"
v-bind="{ ...getDataByField(props.setting, 'editor') }"
/>
</template>

12
src/ui/client/dashboard/components/Forms/Feature/Clipboard.vue
View file

@ -21,6 +21,7 @@ import { useUUID } from "@utils/global.js";
* @param {String} [valueToCopy=""] - The value to copy
* @param {String} [clipboadClass=""] - Additional class for the clipboard container. Useful to fit the component in a specific container.
* @param {String} [copyClass=""] - The class of the copy message. Useful to fit the component in a specific container.
* @param {String} [fieldSize="normal"] - Size between "normal" or "sm"
*/
const { text, copy, copied, isSupported } = useClipboard({ legacy: true });
@ -31,6 +32,11 @@ const props = defineProps({
required: false,
default: "",
},
fieldSize: {
type: String,
required: false,
default: "normal",
},
isClipboard: {
type: Boolean,
required: false,
@ -65,7 +71,11 @@ onBeforeMount(() => {
<template>
<div
v-if="props.isClipboard"
:class="['input-clipboard-container', props.clipboardClass]"
:class="[
'input-clipboard-container',
props.clipboardClass,
props.fieldSize,
]"
>
<button
type="button"

10
src/ui/client/dashboard/components/Forms/Field/Checkbox.vue
View file

@ -43,6 +43,7 @@ import { useUUID } from "@utils/global.js";
* @param {String} [containerClass=""]
* @param {String} [headerClass=""]
* @param {String} [inpClass=""]
* @param {String} [fieldSize="normal"] - Size between "normal" or "sm"
* @param {String|Number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
*/
@ -115,6 +116,11 @@ const props = defineProps({
required: false,
default: "",
},
fieldSize: {
type: String,
required: false,
default: "normal",
},
tabId: {
type: [String, Number],
required: false,
@ -166,6 +172,7 @@ onMounted(() => {
:id="checkbox.id"
:hideLabel="props.hideLabel"
:headerClass="props.headerClass"
:fieldSize="props.fieldSize"
/>
<div class="checkbox-container">
@ -184,6 +191,7 @@ onMounted(() => {
checkbox.value === 'yes' ? 'check' : '',
checkbox.isValid ? 'valid' : 'invalid',
props.inpClass,
props.fieldSize,
]"
type="checkbox"
:value="checkbox.value"
@ -194,7 +202,7 @@ onMounted(() => {
role="img"
aria-hidden="true"
v-show="checkbox.value === 'yes'"
class="checkbox-svg"
:class="['checkbox-svg', props.fieldSize]"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>

8
src/ui/client/dashboard/components/Forms/Field/Combobox.vue
View file

@ -57,6 +57,7 @@ import { useUUID } from "@utils/global.js";
* @param {Boolean} [overflowAttrEl=""] - Attribute to select the container the element has to check for overflow
* @param {String} [containerClass=""]
* @param {String} [inpClass=""]
* @param {String} [fieldSize="normal"] - Size between "normal" or "sm"
* @param {String} [headerClass=""]
* @param {String|Number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
*/
@ -73,6 +74,11 @@ const props = defineProps({
required: false,
default: false,
},
fieldSize: {
type: String,
required: false,
default: "normal",
},
value: {
type: String,
required: true,
@ -394,6 +400,7 @@ const emits = defineEmits(["inp"]);
:label="props.label"
:hideLabel="props.hideLabel"
:headerClass="props.headerClass"
:fieldSize="props.fieldSize"
/>
<select :id="inp.id" aria-hidden="true" :name="props.name" class="hidden">
@ -431,6 +438,7 @@ const emits = defineEmits(["inp"]);
'select-btn',
select.isValid ? 'valid' : 'invalid',
props.inpClass,
props.fieldSize,
]"
>
<span :id="`${inp.id}-text`" class="select-btn-name">

11
src/ui/client/dashboard/components/Forms/Field/Datepicker.vue
View file

@ -57,6 +57,7 @@ import "@assets/css/flatpickr.dark.min.css";
* @param {Boolean} [required=false]
* @param {String} [headerClass=""]
* @param {String} [containerClass=""]
* @param {String} [fieldSize="normal"] - Size between "normal" or "sm"
* @param {String|Number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
*/
@ -67,6 +68,11 @@ const props = defineProps({
required: false,
default: "",
},
fieldSize: {
type: String,
required: false,
default: "normal",
},
name: {
type: String,
required: true,
@ -740,6 +746,7 @@ onUnmounted(() => {
:id="date.id"
:hideLabel="props.hideLabel"
:headerClass="props.headerClass"
:fieldSize="props.fieldSize"
/>
<div class="relative flex flex-col items-start">
@ -754,6 +761,7 @@ onUnmounted(() => {
'input-regular',
props.inpClass,
props.disabled ? 'cursor-not-allowed' : 'cursor-pointer',
props.fieldSize,
]"
:id="date.id"
:required="props.required || false"
@ -770,7 +778,7 @@ onUnmounted(() => {
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="datepicker-svg"
:class="['datepicker-svg', props.fieldSize]"
>
<path
stroke-linecap="round"
@ -779,6 +787,7 @@ onUnmounted(() => {
/>
</svg>
<Clipboard
:fieldSize="props.fieldSize"
:isClipboard="props.isClipboard"
:valueToCopy="date.currStamp"
:clipboardClass="'datepicker-clip'"

13
src/ui/client/dashboard/components/Forms/Field/Editor.vue
View file

@ -50,9 +50,10 @@ import "@assets/script/editor/theme-dawn.js";
* @param {Boolean} [isClipboard=true] - allow to copy the input value
* @param {Boolean} [hideLabel=false]
* @param {String} [containerClass=""]
* @param {String} [editorClass=""]
* @param {String} [inpClass=""]
* @param {String} [headerClass=""]
* @param {String|Number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
* @param {String} [fieldSize="normal"] - Size between "normal" or "sm"
*/
const props = defineProps({
@ -129,7 +130,7 @@ const props = defineProps({
required: false,
default: "",
},
editorClass: {
inpClass: {
type: String,
required: false,
default: "",
@ -139,6 +140,11 @@ const props = defineProps({
required: false,
default: contentIndex,
},
fieldSize: {
type: String,
required: false,
default: "normal",
},
});
const editor = reactive({
@ -373,6 +379,7 @@ onUnmounted(() => {
:id="`${editor.id}-editor`"
:hideLabel="props.hideLabel"
:headerClass="props.headerClass"
:fieldSize="props.fieldSize"
/>
<div
@ -390,7 +397,7 @@ onUnmounted(() => {
:class="[
'input-editor',
props.disabled ? 'disabled' : 'enabled',
props.editorClass,
props.inpClass,
]"
:aria-description="$t('inp_editor_desc')"
:id="editor.id"

9
src/ui/client/dashboard/components/Forms/Field/Input.vue
View file

@ -58,6 +58,7 @@ import { useUUID } from "@utils/global.js";
* @param {String} [containerClass=""]
* @param {String} [inpClass=""]
* @param {String} [headerClass=""]
* @param {String} [fieldSize="normal"] - Size between "normal" or "sm"
* @param {String|Number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
*/
@ -68,6 +69,11 @@ const props = defineProps({
required: false,
default: "",
},
fieldSize: {
type: String,
required: false,
default: "normal",
},
columns: {
type: [Object, Boolean],
required: false,
@ -198,6 +204,7 @@ onMounted(() => {
:id="inp.id"
:hideLabel="props.hideLabel"
:headerClass="props.headerClass"
:fieldSize="props.fieldSize"
/>
<div class="input-regular-container">
@ -217,6 +224,7 @@ onMounted(() => {
'input-regular',
inp.isValid ? 'valid' : 'invalid',
props.inpClass,
props.fieldSize,
]"
:required="props.required || false"
:readonly="props.readonly || false"
@ -243,6 +251,7 @@ onMounted(() => {
<Clipboard
:isClipboard="props.isClipboard"
:valueToCopy="inp.value"
:fieldSize="props.fieldSize"
:clipboardClass="
props.type === 'password' ? 'pw-input-clip' : 'no-pw-input-clip'
"

9
src/ui/client/dashboard/components/Forms/Field/List.vue
View file

@ -53,6 +53,7 @@ import ErrorDropdown from "@components/Forms/Error/Dropdown.vue";
* @param {String} [containerClass=""]
* @param {String} [inpClass=""]
* @param {String} [headerClass=""]
* @param {String} [fieldSize="normal"] - Size between "normal" or "sm"
* @param {String|Number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
*/
@ -63,6 +64,11 @@ const props = defineProps({
required: false,
default: "",
},
fieldSize: {
type: String,
required: false,
default: "normal",
},
columns: {
type: [Object, Boolean],
required: false,
@ -394,6 +400,7 @@ const emits = defineEmits(["inp"]);
:label="props.label"
:hideLabel="props.hideLabel"
:headerClass="props.headerClass"
:fieldSize="props.fieldSize"
/>
<!--custom-->
<div class="relative">
@ -420,6 +427,7 @@ const emits = defineEmits(["inp"]);
? 'valid'
: 'invalid',
props.inpClass,
props.fieldSize,
]"
@focusin="openSelect()"
:required="props.required || false"
@ -506,6 +514,7 @@ const emits = defineEmits(["inp"]);
id === 0 ? 'first' : '',
id === inp.values.length - 1 ? 'last' : '',
'list-dropdown-btn',
props.fieldSize,
]"
data-select-item
:data-setting-id="inp.id"

9
src/ui/client/dashboard/components/Forms/Field/Select.vue
View file

@ -57,6 +57,7 @@ import { useUUID } from "@utils/global";
* @param {String} [containerClass=""]
* @param {String} [inpClass=""]
* @param {String} [headerClass=""]
* @param {String} [fieldSize="normal"] - Size between "normal" or "sm"
* @param {String|Number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
*/
@ -67,6 +68,11 @@ const props = defineProps({
required: false,
default: "",
},
fieldSize: {
type: String,
required: false,
default: "normal",
},
columns: {
type: [Object, Boolean],
required: false,
@ -366,6 +372,7 @@ const emits = defineEmits(["inp"]);
:id="select.id"
:hideLabel="props.hideLabel"
:headerClass="props.headerClass"
:fieldSize="props.fieldSize"
/>
<select :id="select.id" :name="props.name" class="hidden">
@ -403,6 +410,7 @@ const emits = defineEmits(["inp"]);
'select-btn',
select.isValid ? 'valid' : 'invalid',
props.inpClass,
props.fieldSize,
]"
>
<span :id="`${select.id}-text`" class="select-btn-name">
@ -457,6 +465,7 @@ const emits = defineEmits(["inp"]);
? 'active'
: '',
'select-dropdown-btn',
props.fieldSize,
]"
data-select-item
:data-setting-id="select.id"

14
src/ui/client/dashboard/components/Forms/Header/Field.vue
View file

@ -27,6 +27,7 @@ import PopoverGroup from "@components/Widget/PopoverGroup.vue";
* @param {Boolean} [required=false]
* @param {Boolean} [hideLabel=false]
* @param {String} [headerClass=""]
* @param {String} [fieldSize="normal"] - Size between "normal" or "sm" inherit from field
*/
const props = defineProps({
@ -60,6 +61,11 @@ const props = defineProps({
type: String,
required: false,
},
fieldSize: {
type: String,
required: false,
default: "normal",
},
});
const labelEl = ref(null);
@ -78,15 +84,19 @@ onMounted(() => {
props.headerClass,
'input-header-container',
props.popovers.length ? 'popover' : 'no-popover',
props.fieldSize,
]"
data-is="header-field"
>
<div>
<label
ref="labelEl"
:class="[props.label ? '' : 'sr-only']"
:class="[
'input-header-label',
props.label ? '' : 'sr-only',
props.fieldSize,
]"
:for="props.id"
class="input-header-label"
>
{{
props.label

79
src/ui/client/dashboard/components/Widget/Tabulator.vue
View file

@ -42,21 +42,22 @@ const tableStore = useTableStore();
* "columns": {"pc": 3, "tablet": 4, "mobile": 12},
* },
* }];
* @param {string} id - Unique id of the table
* @param {boolean} [isStriped=true] - Add striped class to the table
* @param {array} [filters=[]] - List of filters to display
* @param {array} columns - List of columns to display
* @param {array} items - List of items to display
* @param {array} [actionsButtons=[]] - Buttons group props to render buttons that will be after filters and before the table stick left.
* @param {string} [layout="fitDataTable"] - Layout of the table. "fitDataTable" useful with wide columns, "fitColumns" useful with narrow columns.
* @param {number} [rowHeight= 0] - Case value is 0, this will be ignored.
* @param {number} [colMinWidth=150] - Minimum width for each col of a row
* @param {number} [colMaxWidth=0] - Maximum width for each col of a row. Case value is 0, this will be ignored.
* @param {boolean} [isPagination=true] - Add pagination to the table
* @param {number} [paginationSize=10] - Number of items per page
* @param {number} [paginationInitialPage=1] - Initial page
* @param {array} [paginationSizeSelector=[10, 25, 50, 100]] - Select number of items per page
* @returns {void}
* @param {String} id - Unique id of the table
* @param {Boolean} [isStriped=true] - Add striped class to the table
* @param {Array} [filters=[]] - List of filters to display
* @param {Array} columns - List of columns to display
* @param {Array} items - List of items to display
* @param {Array} [actionsButtons=[]] - Buttons group props to render buttons that will be after filters and before the table stick left.
* @param {String} [layout="fitDataTable"] - Layout of the table. "fitDataTable" useful with wide columns, "fitColumns" useful with narrow columns.
* @param {Number} [rowHeight= 0] - Case value is 0, this will be ignored.
* @param {Number} [colMinWidth=150] - Minimum width for each col of a row
* @param {Number} [colMaxWidth=0] - Maximum width for each col of a row. Case value is 0, this will be ignored.
* @param {Boolean} [isPagination=true] - Add pagination to the table
* @param {Number} [itemsBeforePagination=10] - Hide pagination unless number is reach.
* @param {Number} [paginationSize=10] - Number of items per page
* @param {Number} [paginationInitialPage=1] - Initial page
* @param {Array} [paginationSizeSelector=[10, 25, 50, 100]] - Select number of items per page
* @returns {Void}
*/
const customComponents = ["Icons", "Text", "Fields", "Button", "ButtonGroup"];
@ -121,6 +122,11 @@ const props = defineProps({
required: false,
default: 10,
},
itemsBeforePagination: {
type: Number,
required: false,
default: 10,
},
paginationInitialPage: {
type: Number,
required: false,
@ -159,14 +165,13 @@ const table = reactive({
columns = formatColumns(columns);
opts.columns = columns;
if (props.isPagination) {
opts.pagination = true;
opts.paginationSize = props.paginationSize;
opts.paginationInitialPage = props.paginationInitialPage;
opts.paginationButtonCount = 2;
opts.paginationSizeSelector = props.paginationSizeSelector.concat([true]);
opts.paginationCounter = "rows";
}
opts.pagination = props.isPagination;
opts.paginationSize = props.paginationSize;
opts.paginationInitialPage = props.paginationInitialPage;
opts.paginationButtonCount = 2;
opts.paginationSizeSelector = props.paginationSizeSelector.concat([true]);
opts.paginationCounter = "rows";
return opts;
}),
});
@ -243,10 +248,37 @@ function filterTable(filter, value = "") {
applyTableFilter(table.instance, table.filters);
}
/**
* @name togglePagination
* @description We can't directly show or hide pagination without creating instance, so we will handle it externally.
* We will listen to table data, and check the number of items after a change and we will hide or show the pagination.
* @returns {Void}
*/
function togglePagination() {
if (!props.isPagination || !props.itemsBeforePagination) return;
function toggle(currItems, itemsToShow) {
const isPagination = currItems.length >= itemsToShow ? true : false;
const footer = tableEl.value.querySelector(".tabulator-footer");
isPagination
? footer.classList.remove("hidden")
: footer.classList.add("hidden");
}
toggle(props.items, props.itemsBeforePagination);
table.instance.on("dataChanged", (data) => {
toggle(data, props.itemsBeforePagination);
});
}
onMounted(() => {
extendTabulator();
table.instance = new Tabulator(tableEl.value, table.options);
table.instance.on("tableBuilt", () => {
togglePagination();
a11yTable(table.instance);
// Add table instance to store in order to use it in other components
tableStore.setTable(props.id, table.instance);
@ -275,7 +307,6 @@ onMounted(() => {
:buttons="props.actionsButtons"
/>
<div
v-show="table.customRender"
:class="[props.isStriped ? 'striped' : '']"
ref="tableEl"
data-is="table-content"

2
src/ui/client/dashboard/pages/bans/index.html
View file

File diff suppressed because one or more lines are too long

102
src/ui/client/input.css
View file

@ -176,6 +176,14 @@ body {
@apply z-20;
}
.input-header-container.normal {
@apply mb-1;
}
.input-header-container.sm {
@apply mb-0.5;
}
.no-popover.input-header-container {
@apply flex justify-start;
}
@ -185,7 +193,15 @@ body {
}
.input-header-label {
@apply relative lowercase capitalize-first mb-1 transition duration-300 ease-in-out text-sm font-bold m-0 dark:text-gray-300 mr-1;
@apply relative lowercase capitalize-first transition duration-300 ease-in-out font-bold dark:text-gray-300;
}
.input-header-label.normal {
@apply text-sm m-0 mr-1;
}
.input-header-label.sm {
@apply text-xs m-0 mr-1;
}
.input-header-required-sign {
@ -252,17 +268,33 @@ body {
dark:disabled:text-gray-300;
}
.checkbox.normal {
@apply w-5 h-5;
}
.checkbox.sm {
@apply w-4.5 h-4.5;
}
.check.checkbox {
@apply dark:aria-checked:disabled:bg-gray-800 aria-checked:disabled:border-gray-400/0 aria-checked:disabled:bg-gray-400 aria-checked:z-0 aria-checked:bg-gray-200 dark:aria-checked:bg-slate-600;
}
.checkbox-svg {
@apply z-10 pointer-events-none absolute fill-gray-700 dark:fill-gray-100 left-0 top-0 translate-x-[3px] translate-y-[7px] h-3.5 w-3.5;
@apply z-10 pointer-events-none absolute fill-gray-700 dark:fill-gray-100 left-0 top-0;
}
.checkbox-svg.normal {
@apply translate-x-[3px] translate-y-[7px] h-3.5 w-3.5;
}
.checkbox-svg.sm {
@apply translate-x-[3px] translate-y-[7px] h-3 w-3;
}
.select-btn {
@apply relative dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400/0 disabled:cursor-not-allowed
dark:disabled:bg-gray-800 dark:disabled:border-gray-800/0 duration-300 ease-in-out dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 hover:border-gray-600 focus:border-gray-600 flex justify-between align-middle items-center text-left text-sm leading-5.6 w-full rounded-lg border border-solid border-gray-400 bg-white bg-clip-padding px-1.5 py-1 md:px-2.5 md:py-1.5 font-normal text-gray-700 transition-all placeholder:text-gray-500;
dark:disabled:bg-gray-800 dark:disabled:border-gray-800/0 duration-300 ease-in-out dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 hover:border-gray-600 focus:border-gray-600 flex justify-between align-middle items-center text-left w-full rounded-lg border border-solid border-gray-400 bg-white bg-clip-padding font-normal text-gray-700 transition-all placeholder:text-gray-500;
}
.select-btn-name {
@ -290,11 +322,21 @@ body {
}
.select-dropdown-btn {
@apply outline-offset-[-4px] border-b border-l border-r border-gray-300 hover:brightness-90 bg-white text-gray-700 my-0 relative px-2 py-2 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-normal dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300;
@apply outline-offset-[-4px] border-b border-l border-r border-gray-300 hover:brightness-90 bg-white text-gray-700 relative text-left align-middle transition-all rounded-none cursor-pointer ease-in tracking-normal dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300;
}
.list-dropdown-btn {
@apply outline-offset-[-4px] border-b border-l border-r border-gray-300 hover:brightness-90 bg-white text-gray-700 my-0 relative px-2 py-2 flex justify-between align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-normal dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300;
@apply outline-offset-[-4px] border-b border-l border-r border-gray-300 hover:brightness-90 bg-white text-gray-700 relative flex justify-between align-middle transition-all rounded-none cursor-pointer leading-normal ease-in tracking-normal dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300;
}
.select-dropdown-btn.normal,
.list-dropdown-btn.normal {
@apply my-0 px-2 py-2 text-sm leading-normal;
}
.select-dropdown-btn.sm,
.list-dropdown-btn.sm {
@apply my-0 px-2 py-1 text-xs leading-normal;
}
.active.select-dropdown-btn {
@ -331,15 +373,27 @@ body {
}
.input-combobox {
@apply hover:border-gray-600 outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200 focus:border-gray-300/0 dark:focus:border-gray-600/0 focus:ring-1 focus:valid:ring-green-500 focus:invalid:ring-red-500 text-sm leading-5.6 ease-in block w-full appearance-none rounded-t-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-2.5 md:py-1.5 font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:cursor-not-allowed
@apply hover:border-gray-600 outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200 focus:border-gray-300/0 dark:focus:border-gray-600/0 focus:ring-1 focus:valid:ring-green-500 focus:invalid:ring-red-500 ease-in block w-full appearance-none rounded-t-lg border border-solid border-gray-300 bg-white bg-clip-padding font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:cursor-not-allowed
disabled:bg-gray-400 disabled:border-gray-400/0 dark:disabled:bg-gray-800 dark:disabled:border-gray-800/0 dark:disabled:text-gray-300 disabled:text-gray-700;
}
.input-regular {
@apply hover:border-gray-600 outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200 focus:border-gray-300/0 dark:focus:border-gray-600/0 focus:ring-1 focus:valid:ring-green-500 focus:invalid:ring-red-500 text-sm leading-5.6 ease-in block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-2.5 md:py-1.5 font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:cursor-not-allowed
@apply hover:border-gray-600 outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200 focus:border-gray-300/0 dark:focus:border-gray-600/0 focus:ring-1 focus:valid:ring-green-500 focus:invalid:ring-red-500 ease-in block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:cursor-not-allowed
disabled:bg-gray-400 disabled:border-gray-400/0 dark:disabled:bg-gray-800 dark:disabled:border-gray-800/0 dark:disabled:text-gray-300 disabled:text-gray-700;
}
.input-regular.normal,
.input-combobox.normal,
.select-btn.normal {
@apply px-1.5 py-1 md:px-2.5 md:py-1.5 text-sm leading-5.6;
}
.input-regular.sm,
.input-combobox.sm,
.select-btn.sm {
@apply px-1.5 py-1 text-xs leading-[unset];
}
.input-regular-container {
@apply relative flex flex-col items-start;
}
@ -353,7 +407,7 @@ body {
}
.input-editor {
@apply z-10 min-h-[200px] h-full w-full;
@apply z-10 min-h-[300px] h-full w-full;
}
.disabled.input-editor {
@ -372,18 +426,30 @@ body {
@apply top-2 right-6;
}
.datepicker-clip.input-clipboard-container {
.datepicker-clip.input-clipboard-container.normal {
@apply top-1 md:top-1.5 right-[2.25rem];
}
.pw-input-clip.input-clipboard-container {
.pw-input-clip.input-clipboard-container.normal {
@apply top-1 md:top-1.5 right-[2.25rem];
}
.no-pw-input-clip.input-clipboard-container {
.no-pw-input-clip.input-clipboard-container.normal {
@apply top-1 md:top-1.5 right-2;
}
.datepicker-clip.input-clipboard-container.sm {
@apply top-[0.2rem] right-[2.25rem];
}
.pw-input-clip.input-clipboard-container.sm {
@apply top-[0.2rem] right-[2.25rem];
}
.no-pw-input-clip.input-clipboard-container.sm {
@apply top-[0.2rem] right-2;
}
.input-clipboard-svg {
@apply stroke-gray-800 dark:stroke-gray-300;
}
@ -413,7 +479,15 @@ body {
}
.datepicker-svg {
@apply stroke-gray-800 dark:stroke-gray-300 w-6 h-6 opacity-[50%] pointer-events-none absolute top-1 md:top-1.5 right-2;
@apply stroke-gray-800 dark:stroke-gray-300 w-6 h-6 opacity-[50%] pointer-events-none absolute;
}
.datepicker-svg.normal {
@apply top-1 md:top-1.5 right-2;
}
.datepicker-svg.sm {
@apply top-[0.2rem] right-2;
}
.datepicker-clip.input-clipboard-copy {
@ -517,7 +591,7 @@ body {
}
.layout-table-settings {
@apply mb-4 sm:gap-x-8 gap-y-8 col-span-12 grid grid-cols-12 w-full relative;
@apply mb-4 gap-y-4 sm:gap-x-4 md:gap-x-8 md:gap-y-8 col-span-12 grid grid-cols-12 w-full relative;
}
.layout-card {
@ -553,7 +627,7 @@ body {
}
.layout-settings {
@apply py-4 sm:gap-x-8 gap-y-8 col-span-12 grid grid-cols-12 w-full relative;
@apply py-4 gap-y-4 sm:gap-x-4 md:gap-x-8 md:gap-y-8 col-span-12 grid grid-cols-12 w-full relative;
}
.layout-settings-multiple {

2
src/ui/client/public/css/style.css
View file

File diff suppressed because one or more lines are too long

2
src/ui/client/tailwind.config.js
View file

@ -1088,7 +1088,7 @@ export default {
"size-inherit": "inherit",
"3xs": ["0.5rem", { lineHeight: "1rem" }],
xxs: ["0.65rem", { lineHeight: "1rem" }],
xs: ["0.75rem", { lineHeight: "1rem" }],
xs: ["0.825rem", { lineHeight: "1rem" }],
sm: ["0.875rem", { lineHeight: "1.5rem" }],
base: ["1rem", { lineHeight: "1.5rem" }],
lg: ["1.125rem", { lineHeight: "1.75rem" }],